欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年11月28日 16:00:18   作者：程序員小小黑  
這篇文章主要介紹了vue?通過ref調用router-view子組件的方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

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
   }
  // 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
})

到此這篇關于vue 通過ref調用router-view子組件的方法的文章就介紹到這了,更多相關vue ref調用子組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論