当前位置: 首页 > news >正文

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.lryc.cn/news/241213.html

相关文章:

  • 在全球碳市场中崭露头角的中碳CCNG
  • uni-app - 弹出框
  • 深度学习之基于Tensorflow卷积神经网络鸟类目标识别检测系统
  • 关闭EntityFramework日志输出SQL
  • 重新开启GPT Plus充值通道——基于前端开发者工具
  • 技术细分|推荐系统——推荐系统中的数据去偏方法
  • 多功能回馈式交流电子负载的应用
  • AIGC专题报告:生成式人工智能用例汇编
  • php xml数据转数组两种方式
  • wagtail-安装配置
  • 基于Android校园交流uniAPP+vue 微信小程序v7e1
  • geemap学习笔记013:为遥感动态GIF图添加图名
  • 【开源】基于JAVA的高校实验室管理系统
  • 为啥 有了锤子,看啥都是钉子?
  • java实现连接linux(上传文件,执行shell命令等)
  • 苹果企业签名和TF签名都是iOS内测中的常见方法有哪些?
  • CC++输入输出流介绍
  • leedcode 刷题 - 除自身以外数组的乘积 - 和为 K 的子数组
  • uniapp 富文本以及移动端富文本的展示问题
  • JAVA sql 查询
  • 掌握Katalon Studio 导入 swagger 接口文档,接口测试效率提升100%
  • 程序员最奔溃的瞬间
  • java字符串的常见用法
  • 链表OJ--下
  • FreeRTOS源码阅读笔记4--semphr.h
  • 面试:MyBatis问题
  • vue中页面(路由)跳转及传值的几种方式 router-link + query + params
  • 媒体格式转换软件Permute 3 mac中文版软件特点
  • Docker实用篇
  • 开启数据库审计(db,extended级别或os级别),并将审计文件存放到/home/oracle/audit下