脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue ref调用子组件

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调用子组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue router-view的嵌套显示实现

    vue router-view的嵌套显示实现

    本文主要介绍了vue router-view嵌套显示，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Vue中的Computed实现原理分析

    Vue中的Computed实现原理分析

    这篇文章主要介绍了Vue中的Computed实现原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue3 自定义指令控制按钮权限的操作代码

    vue3 自定义指令控制按钮权限的操作代码

    这篇文章主要介绍了vue3 自定义指令控制按钮权限,为了提高用户体验，当该按钮无权使用时，使用el-tooltip功能进行提醒，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-10-10
  • Vue源码分析之虚拟DOM详解

    Vue源码分析之虚拟DOM详解

    所谓虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有 10 次更新 这篇文章主要给大家介绍了关于Vue源码分析之虚拟DOM的相关资料,需要的朋友可以参考下
    2021-05-05
  • 详解windows下vue-cli及webpack 构建网站(三)使用组件

    详解windows下vue-cli及webpack 构建网站(三)使用组件

    本篇文章主要介绍了详解windows下vue-cli及webpack 构建网站(三)使用组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • vue+flv.js+SpringBoot+websocket实现视频监控与回放功能

    vue+flv.js+SpringBoot+websocket实现视频监控与回放功能

    vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2022-02-02
  • 详解如何在你的Vue项目配置vux

    详解如何在你的Vue项目配置vux

    这篇文章主要介绍了详解如何在你的Vue项目配置vux，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue通过路由实现页面刷新的方法

    vue通过路由实现页面刷新的方法

    本篇文章主要介绍了vue通过路由实现页面刷新的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 如何写好一个vue组件,老夫的一年经验全在这了（推荐）

    如何写好一个vue组件,老夫的一年经验全在这了（推荐）

    这篇文章主要介绍了如何写好一个vue组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue中的事件绑定问题

    Vue中的事件绑定问题

    这篇文章主要介绍了Vue中的事件绑定问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11

最新评论