vue 通過ref調用router-view子組件的方法

在這里插入圖片描述

由于用的vue2.7版本,但用了vue3 setup的語法;
注意:是vue2的template結構,vue3的setup語法;非這種情況需要舉一反三。

處理方案:

1、對router-view加上ref

  • template修改
    直接對router-view加上ref,
    <router-view ref="child" > </router-view>
  • script修改
  // add方法function add(){// 成功后調用子組件(此)proxy.$refs.child.refreshList}

2、子組件暴漏方法

注意:一定要用【defineExpose】暴漏給父級,否則父級看不到這個方法
script內:

function refreshList() {
}// 暴漏給父組件
defineExpose({refreshList
})

其他場景的:

3、純vue2的

應該this.$refs.child.refreshList就成,
因為子組件用的是 methods定義的

4、純vue3的

  • 父組件template修改
<template><router-view v-slot="{ Component }"><component ref="child" :is="Component" /></router-view>
</template>
  • 父組件script修改
  // add方法function add(){// 成功后調用子組件(此)proxy.$refs.child.refreshList}
  • 子組件script修改
    注意:一定要用【defineExpose】暴漏給父級,否則父級看不到這個方法
function refreshList() {
}
// 暴漏給父組件
defineExpose({refreshList
})

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/165996.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/165996.shtml
英文地址,請注明出處:http://en.pswp.cn/news/165996.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

金蝶云星空和四化智造MES(WEB)單據接口對接

金蝶云星空和四化智造MES&#xff08;WEB&#xff09;單據接口對接 對接系統&#xff1a;四化智造MES&#xff08;WEB&#xff09; MES系統是集成生產管理、品質管理、設備管理、BI數據中心、庫存管理、工時管理、數據采集、看板管理等為一體的綜合性生產管理系統。通過強調制造…

wagtail-安裝配置

系列文章目錄 文章目錄 系列文章目錄安裝虛擬環境安裝wagtail查看安裝后的包 創建wagtail項目安裝依賴遷移創建超級用戶運行項目 安裝虛擬環境 https://blog.csdn.net/gsl371/article/details/117917857 安裝wagtail (wagenv) C:\djproject\wagprj>pip list Package V…

淘寶88vip退費問題

前一段時間&#xff0c;雙十一活動&#xff0c;想著開個淘寶的88vip領卷買東西會實惠一點&#xff0c;另外&#xff0c;它自帶的權益也不錯&#xff0c;有餓了嗎、網易云、優酷或者芒果的。但是到了當天發現&#xff0c;一個vip的卷也用不了&#xff0c;頓感什么惱火&#xff0…

synchronized的輕量級鎖居然不會自旋?

《Java并發編程的藝術》中說到「如果失敗&#xff0c;表示其他線程競爭鎖&#xff0c;當前線程便嘗試使用自旋來獲取鎖」&#xff0c;并且下文所配的流程圖中明確表示自旋失敗后才會升級為重量級鎖&#xff0c;但《深入理解Java虛擬機》又說「如果出現兩條以上的線程爭用同一個…

超聲波雪深傳感器冬季里的科技魔法

在冬季的某個清晨&#xff0c;當你打開大門&#xff0c;被厚厚的積雪覆蓋的大地映入眼簾&#xff0c;你是否曾想過&#xff0c;這片雪地的深度是多少&#xff1f;它又如何影響著我們的生活和環境&#xff1f;今天&#xff0c;我們將為你揭開這個謎團&#xff0c;介紹一款神秘的…

眼鏡清洗機原理是怎么樣的?2023年眼鏡清洗機推薦

在日常生活中有許多小伙伴是因為看太多書或者是看太多電子產品導致近視佩戴上了眼鏡&#xff0c;畢竟眼鏡佩戴上后就再也離不開它了&#xff0c;像日常佩戴的眼鏡上會積累非常多污垢以及堆積細菌&#xff0c;而我們手動清洗眼鏡時不能除菌也不能清潔到縫隙中&#xff0c;像眼鏡…

thingsboard的WebSocket API的使用

1、參考文檔 Working with telemetry data | ThingsBoard Community Edition 2、訂閱的命令 我們需要訂閱不同的數據,那么該如何來填寫參數呢,你需要參考后端代碼 TelemetryPluginCmdsWrapper 以及訂閱返回的結果參考類:TelemetrySubscriptionUpdate 鏈接地址: https:/…

error: ‘for‘ loop initial declarations are only allowed in C99 or C11 mode

在使用for循環時&#xff0c;在循環內定義變量&#xff0c;出現如下錯誤 [Error] ‘for’ loop initial declarations are only allowed in C99 or C11 mode [Note] use option -stdc99&#xff0c;-stdgnu99&#xff0c;-stdc11 or-stdgnu11 to compile your code 出現這個錯誤…

使用Pytorch從零開始構建GRU

門控循環單元 (GRU) 是 LSTM 的更新版本。讓我們揭開這個網絡的面紗并探索這兩個兄弟姐妹之間的差異。 您聽說過 GRU 嗎&#xff1f;門控循環單元&#xff08;GRU&#xff09;是更流行的長短期記憶&#xff08;LSTM&#xff09;網絡的弟弟&#xff0c;也是循環神經網絡&#x…

極智AI | LLM大模型部署框架之OpenLLM

歡迎關注我的公眾號 [極智視界],獲取我的更多經驗分享 大家好,我是極智視界,本文來介紹一下 LLM大模型部署框架之OpenLLM。 邀您加入我的知識星球「極智視界」,星球內有超多好玩的項目實戰源碼下載,鏈接:https://t.zsxq.com/0aiNxERDq 由于 LLM 大模型在模型結構、模型規…

圖像評價之計算PSNR、SSIM、MSE、LPIPS和NIQE評價指標

文章目錄 鏈接說明代碼峰值信噪比結構相似性均方誤差學習感知圖像塊相似性自然圖像質量評估器 鏈接 GitHub 倉庫 如果代碼對你的研究有所幫助&#xff0c;請為該倉庫點上小星星。 說明 PSNR、SSIM、MSE和LPIPS是有監督指標&#xff0c;計算時必須是兩對圖像參與&#xff1b;…

安索夫矩陣(ANSOFF)

&#x1f449;安索夫矩陣是策略管理之父安索夫博士于1957年提出的營銷策略模型&#xff0c;該模型以“產品”和“市場”作為兩大基本面&#xff0c;提出了4種不同組合下的營銷策略&#xff0c;是營銷分析中應用最廣泛的工具之一。其主要邏輯是通過選擇4種不同的成長性策略來實現…

C++11的線程

線程的創建 用std::thread創建線程非常簡單&#xff0c;只需要提供線程函數或者線程對象即可&#xff0c;并可以同時指定線程函數的參數。下面是創建線程的示例&#xff1a; #include <thread> #include <iostream> using namespace std;void func() {cout <<…

C# 獲取圖像、字體等對象大小的數據結構SizeF

如果你想要獲取字符串 "你好嗎" 的字節數組長度或者字符數&#xff0c; 使用如下代碼&#xff1a; string s "你好嗎"; //字節數組長度 int byteCount System.Text.Encoding.UTF8.GetBytes(s).Length; //字符數 int charCount s.Length; 如果你想獲取…

大話設計模式C++實現

大話設計模式&#xff0c;講得非常好&#xff0c;但是作者是用C#寫的&#xff0c;為了方便C程序員&#xff0c;使用C寫了大話設計模式的代碼 詳情見Github&#xff1a;https://github.com/liubamboo/BigTalkDesignPattern

新蘋果手機如何導入舊手機數據?解決方案來了,記得收藏!

為了保持其競爭優勢&#xff0c;蘋果公司不斷推出新的產品和服務&#xff0c;因此蘋果手機的更新換代速度是比較快的。正巧最近剛出了iPhone15&#xff0c;相信很多小伙伴已經換上了期待已久的新手機。 更換新手機后&#xff0c;大家都會面臨一個問題&#xff1a;新蘋果手機如…

java 手機商城免費搭建+電商源碼+小程序+三級分銷+SAAS云平臺

【SAAS云平臺】打造全行業全渠道全場景的SaaS產品&#xff0c;為店鋪經營場景提供一體化解決方案&#xff1b;門店經營區域化、網店經營一體化&#xff0c;本地化、全方位、一站式服務&#xff0c;為多門店提供統一運營解決方案&#xff1b;提供豐富多樣的營銷玩法覆蓋所有經營…

Windows DOS 常用命令

文章目錄 1 概述1.1 官方文檔1.2 常用 2 分類2.1 目錄2.2 文件2.3 網絡2.4 系統 1 概述 1.1 官方文檔 Windows 命令官方文檔&#xff1a;https://learn.microsoft.com/zh-cn/windows-server/administration/windows-commands/windows-commands 1.2 常用 win r # 打開運…

如何預防數據泄露?六步策略幫您打造企業信息安全壁壘

大家好&#xff01;我是恒小馳&#xff0c;今天我想和大家聊聊一個非常重要的話題——如何預防數據泄露。在這個數字化的時代&#xff0c;數據已經成為了我們生活中不可或缺的一部分。然而&#xff0c;隨著數據的價值日益凸顯&#xff0c;數據泄露的風險也隨之增加。企業應該如…