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

vue如何通過ref調(diào)用router-view子組件的方法

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

vue 通過ref調(diào)用router-view子組件的方法

在這里插入圖片描述

由于用的vue2.7版本，但用了vue3 setup的語法；
注意：是vue2的template結(jié)構(gòu)，vue3的setup語法；非這種情況需要舉一反三。

處理方案：

1、對(duì)router-view加上ref template修改
直接對(duì)router-view加上ref，
<router-view ref="child" > </router-view>script修改

  // add方法
  function add(){
    // 成功后調(diào)用子組件（此）
    proxy.$refs.child.refreshList
   }
  // add方法
  function add(){
    // 成功后調(diào)用子組件（此）
    proxy.$refs.child.refreshList
   }

2、子組件暴漏方法

注意：一定要用【defineExpose】暴漏給父級(jí)，否則父級(jí)看不到這個(gè)方法
script內(nèi)：

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

其他場景的：

3、純vue2的

應(yīng)該this.$refs.child.refreshList就成，
因?yàn)樽咏M件用的是 methods定義的

4、純vue3的

父組件template修改

<template>
  <router-view v-slot="{ Component }">
    <component ref="child" :is="Component" />
  </router-view>
</template>

父組件script修改

  // add方法
  function add(){
    // 成功后調(diào)用子組件（此）
    proxy.$refs.child.refreshList
   }

子組件script修改
注意：一定要用【defineExpose】暴漏給父級(jí)，否則父級(jí)看不到這個(gè)方法

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

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

相關(guān)文章

最新評(píng)論