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.hqwc.cn/news/213818.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

编程入门基础知识,编程入门推荐,中文编程工具下载,软件定制开发

编程入门基础知识&#xff0c;编程入门推荐&#xff0c;中文编程工具下载&#xff0c;软件定制开发 给大家分享一款中文编程工具&#xff0c;零基础轻松学编程&#xff0c;不需英语基础&#xff0c;编程工具可下载。 这款工具不但可以连接部分硬件&#xff0c;而且可以开发大型…

webshell之基于框架免杀

thinkphp array_map_recursive函数 array_map_recursive函数分析 这里存在一个call_user_func命令执行函数 免杀效果 B函数 免杀效果 B函数分析 exec函数分析 在exec函数用存在有个类调用&#xff0c;且所有的参数都可控 smarty_php_tag函数 免杀效果 smarty_php_tag函数分析…

探索网络模型与协议:从OSI到HTTPs的原理解析

一、OSI网络模型 OSI&#xff08;Open Systems Interconnection&#xff09;七层网络参考模型和TCP/IP四层模型都是用于理解和设计计算机网络的框架&#xff0c;但它们之间存在一些差异。 1、七层 vs 四层 OSI七层网络参考模型&#xff1a; 物理层&#xff08;Physical Laye…

医院手术麻醉信息系统全套源码,自主版权,支持二次开发

医院手术麻醉信息系统全套商业源码&#xff0c;自主版权&#xff0c;支持二次开发 手术麻醉信息系统是HIS产品的中的一个组成部分&#xff0c;主要应用于医院的麻醉科&#xff0c;属于电子病历类产品。医院麻醉监护的功能覆盖整个手术与麻醉的全过程&#xff0c;包括手术申请与…

MySQL数据库入门到大牛_基础_14_视图及基本操作

本章开始将会介绍表之外的数据库对象。 文章目录 1. 常见的数据库对象2. 视图概述2.1 为什么使用视图&#xff1f;2.2 视图的理解 3. 创建视图3.1 创建单表视图3.2 创建多表联合视图3.3 基于视图创建视图 4. 查看视图5. 更新视图的数据5.1 一般情况5.2 不可更新的视图 6. 修改…

【AI考证笔记】NO.1人工智能的基础概念

以下部分内容来自于百度智能云人才认证培训讲义&#xff0c;腾讯等也有人工智能类似的讲义&#xff0c;限时免费&#xff0c;也就是不报考&#xff0c;也能系统学习&#xff0c;课程做的都是不错的。有感兴趣的朋友&#xff0c;可以去检索学习。 本系列是学习笔记&#xff0c;…

LTD252次升级 | 独立商城促销功能大升级:新增折扣券、支持直接领取、自动送券 • 网站可设置横幅与弹窗广告

1、优惠券功能大升级&#xff1a;支持折扣券&#xff0c;支持商品页面领券支持自动送券&#xff1b; 2、网站版系统支持单独开通广告管理功能&#xff1b; 3、产品介绍页优化社交媒体分享&#xff1b; 4、已知问题优化与修复; 01 商城 商城优惠券功能升级。 本次升级中&#…

Java常量池理论篇:Class常量池、运行时常量池、String常量池、基本类型常量池,intern方法1.6、1.7的区别

文章目录 Class常量池运行时常量池String常量池基本类型常量池Integer 常量池Long 常量池 加餐部分 Class常量池 每个Class字节码文件中包含类常量池用来存放字面量以及符号引用等信息。 运行时常量池 java文件被编译成class文件之后&#xff0c;也就是会生成我上面所说的 …

什么是 TLS/SSL 握手

TLS/SSL 握手是一个加密过程&#xff0c;每当客户端&#xff08;如浏览器&#xff09;与服务器建立连接时&#xff0c;都会在后台进行&#xff0c;此握手协议有助于客户端和服务器之间的安全连接&#xff0c;从而促进隐私、数据完整性和机密性。 TLS/SSL 握手何时发生 每当客…

虚拟机系列:vmware和Oracle VM VirtualBox虚拟机的区别,简述哪一个更适合我?以及相互转换

一. VMware和Oracle VM VirtualBox虚拟机的区别主要体现在以下几个方面: 首先两种软件的安装使用教程如下: VMware ESXI 安装使用教程 Oracle VM VirtualBox安装使用教程 商业模式:VMware是一家商业公司,而Oracle VM VirtualBox是开源软件; 功能:VMware拥有更多的功能和…

飞书智能伙伴之 AI 数智参谋:先进团队,北极星指标也要遥遥领先

11 月 22 日&#xff0c;飞书在 2023 秋季飞书未来无限大会上正式发布了飞书智能伙伴。作为首批生态伙伴&#xff0c;基于 Kyligence 智能一站式指标平台实现的 AI 数智参谋也正式亮相。这是继 11 月 21 日 Kyligence 产品发布会后&#xff0c;Kyligence 在数据驱动决策智能领域…

个人财务管理软件CheckBook Pro mac中文版特点介绍

CheckBook Pro mac是一款Mac平台的个人财务管理软件&#xff0c;主要用于跟踪个人收入、支出和账户余额等信息。 CheckBook Pro mac 软件特点 简单易用&#xff1a;该软件的用户界面非常简洁明了&#xff0c;即使您是初学者也可以轻松上手。 多账户管理&#xff1a;该软件支持…