vue 通过ref调用router-view子组件的方法

news/2025/1/16 5:55:10/

在这里插入图片描述

由于用的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.ppmy.cn/news/1246973.html

相关文章

TIME_WAIT状态TCP连接导致套接字无法重用实验

理论相关知识可以看一下《TIME_WAIT相关知识》。 #include<stdio.h> #include<stdlib.h> #include<string.h> #include<unistd.h> #include<arpa/inet.h> #include<sys/socket.h> #include<errno.h> #include<syslog.h> #inc…

为第一个原生Spring5应用程序添加上Log4J日志框架!

&#x1f609;&#x1f609; 学习交流群&#xff1a; ✅✅1&#xff1a;这是孙哥suns给大家的福利&#xff01; ✨✨2&#xff1a;我们免费分享Netty、Dubbo、k8s、Mybatis、Spring...应用和源码级别的视频资料 &#x1f96d;&#x1f96d;3&#xff1a;QQ群&#xff1a;583783…

WPF创建进度条

使用wpf做一个原生的进度条&#xff0c;进度条上面有值&#xff0c;先看效果。 功能就是点击按钮&#xff0c;后台处理数据&#xff0c;前台显示处理数据的变化&#xff0c;当然还可以对进度条进行美化和关闭的操作&#xff0c;等待后台处理完毕数据&#xff0c;然后自动关闭。…

跨标签页通信的8种方式(下)

跨标签页通信是指在浏览器中的不同标签页之间进行数据传递和通信的过程。在传统的Web开发中&#xff0c;每个标签页都是相互独立的&#xff0c;无法直接共享数据。然而&#xff0c;有时候我们需要在不同的标签页之间进行数据共享或者实现一些协同操作&#xff0c;这就需要使用跨…

linux环境下对mysql操作

连接mysql操作 mysql -h ip -P端口 -u 用户 -p 密码 可以不写密码 mysql -h ip -P端口 -u 用户 -p 创建mysql里面的新用户 CREATE USER 用户名主机名 IDENTIFIED BY 密码; 授予用户权限 GRANT all ON 数据库名.表名 TO 用户名主机名; 可以再 all后面加 FLUSH PRIVIL…

docker限制容器内存的方法

在服务器中使用 docker 时&#xff0c;如果不对 docker 的可调用内存进行限制&#xff0c;当 docker 内的程序出现不可预测的问题时&#xff0c;就很有可能因为内存爆炸导致服务器主机的瘫痪。而对 docker 进行限制后&#xff0c;可以将瘫痪范围控制在 docker 内。 因此&#…

2023年“福建省工业互联网+智能制造创新大赛”开启报名

11月22日&#xff0c;由福建省总工会、福建省大数据集团有限公司共同举办的2023年“福建省工业互联网智能制造创新大赛”启动报名。 大赛积极响应《福建省总工会等八部门关于广泛深入开展劳动和技能竞赛为新发展阶段新福建建设建工立业的意见》&#xff08;闽工〔2022〕70号&am…

Python编写的爬虫为什么受欢迎?

每每回想起我当初学习python爬虫的经历&#xff0c;当初遇到的各种困难险阻至今都历历在目。即便当初道阻且长&#xff0c;穷且益坚&#xff0c;我也从来没有想过要放弃。今天我将以我个人经历&#xff0c;和大家聊一聊有关Python语音编写的爬虫的事情。谈一谈为什么最近几年py…