vue3 ref获取子组件显示 __v_skip : true 获取不到组件的方法 怎么回事怎么解决

看代码

问题出现了  当我想要获取这个组件上的方法时 

为什么获取不到这个组件上的方法呢

原來:

__v_skip: true 是 Vue 3 中的一个特殊属性,用于跳过某些组件的渲染。当一个组件被标记为 __v_skip: true 时,Vue 将不会对该组件进行渲染,也不会将其添加到虚拟 DOM 树中。因此,使用 ref 获取该组件的显示时,将无法获取到该组件上的方法。

如果你想获取子组件上的方法,需要确保子组件没有被标记为 __v_skip: true。如果子组件被标记为 __v_skip: true,则无法通过 ref 获取其方法。

要解决Vue 3中使用ref无法获取子组件方法的问题,可以采取以下几个步骤:

  1. 使用defineExpose:在子组件中,您需要使用defineExpose来暴露子组件的方法。这样,父组件才能通过ref访问到这些方法。
  2. 父组件中引用子组件:在父组件中,您应该使用ref属性来引用子组件的实例。这样,您就可以通过这个引用来调用子组件的方法。
  3. 调用子组件方法:一旦子组件的方法被暴露,并且父组件有了对子组件实例的引用,您就可以直接调用子组件的方法了。例如,如果您在子组件中暴露了一个名为myMethod的方法,那么在父组件中,您可以使用childComponentRef.value.myMethod()来调用它。

于是我查看了一下子组件  由于我是用的语法糖写的 没有进行抛出  所以就有了拿不到的这个问题 上图看一下吧

那这种语法糖怎么抛出呢  就到了今天解决问题的关键  defineExpose

将你子组件中的这个方法进行抛出   父组件就可以拿到啦  现在让我来看一下打印的效果吧~

okok~今天的问题就到这啦~~~~~过38节日去啦

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/446653.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ABAP接口-RFC连接(ABAP TO ABAP)

目录 ABAP接口-RFC连接(ABAP TO ABAP)创建ABAP连接RFC函数的调用 ABAP接口-RFC连接(ABAP TO ABAP) 创建ABAP连接 事务代码:SM59 点击创建,填写目标名称,选择连接类型: 填写主机名…

打卡--MySQL8.0 一(单机部署)

一路走来,所有遇到的人,帮助过我的、伤害过我的都是朋友,没有一个是敌人。如有侵权,请留言,我及时删除! MySQL 8.0 简介 MySQL 8.0与5.7的区别主要体现在:1、性能提升;2、新的默认…

02-app端文章查看,静态化freemarker,分布式文件系统minIO

app端文章查看,静态化freemarker,分布式文件系统minIO 1)文章列表加载 1.1)需求分析 文章布局展示 1.2)表结构分析 ap_article 文章基本信息表 ap_article_config 文章配置表 ap_article_content 文章内容表 三张表关系分析 1.3)导入文章数据库 1.3.1)导入数据…

【vue.js】文档解读【day 2】 | 响应式基础

如果阅读有疑问的话,欢迎评论或私信!! 本人会很热心的阐述自己的想法!谢谢!!! 文章目录 响应式基础声明响应式状态(属性)响应式代理 vs 原始值声明方法深层响应性DOM 更新时机有状态方法 响应式…

电脑数据安全新防线:文件备份的终极指南

一、数据守护者的使命:文件备份的重要性 在数字化日益普及的今天,电脑已成为我们日常生活和工作的必备工具,文件作为我们储存、交流和处理信息的主要载体,其重要性不言而喻。然而,无论是由于硬件故障、软件崩溃&#…

Autosar教程-Mcal教程-GPT配置教程

3.3GPT配置、生成 3.3.1 GPT配置所需要的元素 GPT实际上就是硬件定时器,需要配置的元素有: 1)定时器时钟:定时器要工作需要使能它的时钟源 2)定时器分步:时钟源进到定时器后可以通过分频后再给到定时器 定时器模块选择:MCU有多个定时器模块,需要决定使用哪个定时器模块作…

【动态规划】代码随想录算法训练营第三十九天 |62.不同路径,63.不同路径II(待补充)

62.不同路径 1、题目链接:. - 力扣(LeetCode) 2、文章讲解:代码随想录 3、题目: 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 “Start” )。 机器人每次只能向下或者向右…

JavaScript高级Ⅱ(全面版)

接上文 JavaScript高级Ⅰ JavaScript高级Ⅰ(自认为很全面版)-CSDN博客 目录 第2章 DOM编程 2.1 DOM编程概述 2.1.4 案例演示(商品全选) 2.1.5 dom操作内容 代码演示: 运行效果: 2.1.6 dom操作属性 代码演示: 运行效果: 2…

H264/265编码参数2: Profile Level Tier

profile和level profile和level是视频编码中两个很重要的概率,中文一般叫做档次和级别。 在MPEG2标准里边,按不同的压缩比分成五个档次,按视频清晰度分为四个级别,如下图所示: 档次和级别共有 20 种组合,…

2024年【化工自动化控制仪表】考试总结及化工自动化控制仪表作业考试题库

题库来源:安全生产模拟考试一点通公众号小程序 2024年【化工自动化控制仪表】考试总结及化工自动化控制仪表作业考试题库,包含化工自动化控制仪表考试总结答案和解析及化工自动化控制仪表作业考试题库练习。安全生产模拟考试一点通结合国家化工自动化控…

day-18 长度最小的子数组

运用队列的思维&#xff0c;求出每种满足题意的子数组长度&#xff0c;最小的即为答案&#xff0c;否则返回0 code class Solution {public int minSubArrayLen(int target, int[] nums) {int l0,r0;int ansInteger.MAX_VALUE;int total0;while(r<nums.length){totalnums[r…

C++:类和对象(三)——拷贝构造函数和运算符重载

目录 一、拷贝构造函数 1.概念 2.特性 二、赋值运算符重载 1.运算符重载 2.赋值运算符重载 &#xff08;1&#xff09;注意的点&#xff1a; &#xff08;2&#xff09;赋值运算符不允许被重载为全局函数&#xff0c;只能重载为类的成员函数 &#xff08;3&#xff09;…

STM32单片机示例:ETH_LAN8742_DHCP_NonOS_Poll_H743

文章目录 目的基础说明关键配置关键代码示例链接总结 目的 以太网是比较常用到的功能&#xff0c;STM32系列单片机使用CubeMX配置使用以太网功能比非常方便。不过对于H7系列来说需要使能 DCache 才能启用LwIP&#xff0c;启用Cache后又会带来一些需要特别注意的事情。这篇文章…

HarBor私有镜像仓库安装部署

环境准备 #>>> redis $ yum -y install redis $ systemctl enable --now redis $ vim /etc/redis.conf modify: bind <ipaddress> $ systemctl restart redis#>>> nfs $ yum -y install nfs-utils $ mkdir -p /data/harbor $ vi /etc/exports /data/h…

简介:CMMI软件能力成熟度集成模型

前言 CMMI是英文Capability Maturity Model Integration的缩写。 CMMI认证简称软件能力成熟度集成模型&#xff0c;是鉴定企业在开发流程化和质量管理上的国际通行标准&#xff0c;全球软件生产标准大都以此为基点&#xff0c;并都努力争取成为CMMI认证队伍中的一分子。 对一个…

动静态库

inode inode用于管理文件属性和内容 一个文件只能有一个inode&#xff0c;一个inode可以对应多个文件名 Linux进程中&#xff0c;打开的每一个文件都有对应的文件inode属性和文件页缓冲区&#xff08;内存和磁盘的缓冲区&#xff09; 软硬链接 硬链接 多个文件指向同一个i…

Gradle模块化最佳实践

一&#xff0c;模块化的原因及意义 模块化是一种将大型的软件系统拆分成相互独立的模块的方法。具有以下优势&#xff1a; 代码复用&#xff1a;不同的模块可以共享相同的代码。这样可以避免重复编写相同的代码&#xff0c;提高开发效率。模块独立性&#xff1a;每个模块都可…

【安装教程】windows下安装Faiss-GPU

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 【安装教程】windows下安装Faiss-GPU 查看安装指令 查看安装指令 登录网站&#xff1a;https://anaconda.org/ &#xff0c; 然后搜索faiss-gpu会进入如下界面&#xff0c;或…

Vue 3中的reactive:响应式状态的全面管理

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

讲解Python3内置模块之json编码解码方法

简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式&#xff0c;它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式&#xff0c;这些特性使JSON成为理想的数据交换格式&#xff0c;易于人阅读和编写&#xff0c;同时也易于机器解析和生成&#…