Vue3 组合式API如何获取组件实例?

Vue3 组合式API如何获取组件实例?

Vue2获取方式

Vue2 中,我们可以给组件设置 ref 属性后,就可以直接通过:this.$refs.HelloRef 来获取组件实例中所有的属性和方法

<template><Hello ref="HelloRef" />
</template>

Vue3获取方式

Vue3 中,如果采用了组合式API,它是没有 this 的,所以写法与 Vue2 略有不同。我们可以这么做来获取组件中我们想要的数据

App.vue
首先老规矩,在 App.vue 中通过给 Hello.vue 子组件设置 ref 属性来获取子组件向父组件暴露的属性和方法

<template><!-- 1. 给组件设置ref属性 --><Hello ref="HelloRef" /><button @click="btn">获取组件实例</button>
</template><script lang="ts">
import { ref } from 'vue';
import Hello from './components/Hello.vue'export default {setup() {interface Hello { info: string, func: () => void }// 2. 定义组件变量const HelloRef = ref<Hello | null>(null)const btn = () => {// 4. 获取组件实例console.log(HelloRef.value?.info); // HelloHelloRef.value?.func() // Hello Vue3!}return { btn }}
}
</script>

Hello.vue
Hello.vue 子组件中通过 return 暴露出父组件需要的属性和方法即可

<template><h1>Hello</h1>
</template><script lang="ts">
import { ref } from 'vue';export default {setup() {const info = ref<string>("Hello")const func = () => {console.log("Hello Vue3!");}return { info, func }}
}
</script>

使用 setup 语法糖

但如果使用了 setup 语法糖,则需要用到 defineExpose 宏函数来解决这个问题。

App.vue

<template><Hello ref="HelloRef" /><button @click="btn">获取组件实例</button>
</template><script setup lang="ts">
import { ref } from 'vue';
import Hello from './components/Hello.vue'interface Hello { info: string, func: () => void }const HelloRef = ref<Hello | null>(null)const btn = () => {console.log(HelloRef.value?.info); // HelloHelloRef.value?.func() // Hello Vue3!
}
</script>

Hello.vue
Hello 组件中,通过 defineExpose 将需要暴露给父组件的属性和方法导出

<template><h1>Hello</h1>
</template><script setup lang="ts">
import { Ref, ref } from 'vue';const info = ref<string>("Hello")const func = () => {console.log("Hello Vue3!");
}// 3. 通过 defineExpose 暴露属性 / 方法// js写法
// defineExpose({ info, func })// ts写法
defineExpose<{ info: Ref<string>, func: () => void }>({ info, func })
</script>

注意: 在组合式API setup 语法糖中子组件不通过 defineExpose 将属性 / 方法暴露出去,父组件是无法获取到对应数据的

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

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

相关文章

进程等待讲解

今日为大家分享有关进程等待的知识&#xff01;希望读完本文&#xff0c;大家能有一定的收获&#xff01; 正文开始&#xff01; 进程等待的引进 既然我们今天要讲进程等待这个概念&#xff01;那么只有我们把下面这三个方面搞明白&#xff0c;才能真正的了解进程等待&#x…

【中间件】配置中心中间件intro

中间件middleware 内容管理 why use 配置中心配置中心feature配置中心develop主流配置中心Apollo浅谈 本文从理论上介绍一下服务化中服务治理系统中的配置中心的理论并浅析Apllo 配置在生产中是很关键的一个部分&#xff0c;cfeng在work中遇到几次配置问题引发的问题&#xff0…

计算机基础知识59

MySQL的卸载流程 1、先停止MySQL服务&#xff1a;右键“此电脑”&#xff0c;选择“管理”&#xff0c;之后选择“服务和应用程序”--“服务”&#xff0c;在服务中找到“MySQL”&#xff0c;右键选择“停止”。 2、找到“控制面板”--“程序和功能”&#xff0c;找到MySQL&…

android项目之调用webview

目标 在Android项目中&#xff0c;经常需要使用WebView组件来展示网页或加载HTML内容 步骤 1. 在布局文件中添加WebView组件&#xff1a; <WebView android:id"id/webview" android:layout_width"match_parent" android:layout_height"mat…

springboot接入Spring State Machine实现状态机

描述 在 Spring Boot 中实现状态机&#xff0c;通常使用 Spring State Machine 框架进行实现。该框架可以帮助我们定义、创建和管理复杂的状态机。 接下来给出一个demo&#xff0c;说明如何使用 Spring State Machine 框架实现状态机。 假设我们需要实现一个简单的订单状态机&a…

SocialFi 和 GameFi 的碰撞 — Socrates 构建新的 Web3 流量入口

伴随着比特币现货 ETF 即将通过 SEC 批准的消息&#xff0c;整个加密市场在11月份达到了熊市以来的新高峰。市场普遍上涨&#xff0c;新的玩法和项目不断涌出吸引了大量老用户回归以及新用户加入。加密市场经过长期的低迷&#xff0c;终于来到了牛市的起点&#xff01; 上一轮牛…

Selenium 连接到现有的 Firefox 示例

当前环境&#xff1a; python 3.7 selenium 3.14.1 urllib3 1.26.8 Frefox 115.1.0esr(32位) geckodriver.exe 0.33.0 1 下载 Firefox 浏览器&#xff0c;根据自己的需要选择。 下载 Firefox 浏览器&#xff0c;这里有简体中文及其他 90 多种语言版本…

什么是依赖倒置原则

1、什么是依赖倒置原则 依赖倒置原则&#xff08;Dependency Inversion Principle&#xff0c;DIP&#xff09;是指高层模块不应该依赖于低层模块&#xff0c;它们都应该依赖于抽象。换句话说&#xff0c;具体类之间的依赖关系应该尽可能减少&#xff0c;而抽象类或接口之间的…

C语言自定义函数的整数处理

1.输入10个整数&#xff0c;将其中最小的数与第一个数对换&#xff0c;把最大的数与最后一个数对换。写三个函数&#xff1b; ①输入10个数&#xff1b;②进行处理&#xff1b;③输出10个数。 示例输入&#xff1a; 2 1 3 4 5 6 7 8 10 9 示例输出&#xff1a; 1 2 3 4 5 6…

Python交互式解释器及用法

为了让开发者能快速学习、测试 Python 的各种功能&#xff0c;Python 提供的“python”命令不仅能用于运行 Python 程序&#xff0c;也可作为一个交互式解释器一一开发者逐行输入 Python 代码&#xff0c;它逐行解释执行。 当输入“python”命令时&#xff0c;可以看到如下输出…

带你用uniapp从零开发一个仿小米商场_10. 首页开发

图标菜单栏开发 轮播图开发完成后,就是图标菜单栏了 可以看出这些图标都是一样的样式,所以可以勇哥flex布局让他们每个占百分之20 代码如下,既然都是一样的那就直接用个循环嵌套一下 data数据如下 同样,为了能让这段代码能在别的地方也用到,我直接把它封装成组件 <templ…

Spring 注解

Spring部分 声明bean的注解 Component: 组件&#xff0c;没有明确的角色在这里插入代码片Service: 在业务逻辑层使用&#xff08;service层&#xff09;Repository: 在数据访问层使用&#xff08;dao层&#xff09;Controller: 在展现层使用&#xff0c;控制器的声明&#xff0…

ClickHouse:真正的OLAP列式DBMS

ClickHouse 1、本文持续更新... 1、本文持续更新… ClickHouse官方文档&#xff1a;https://clickhouse.com/docs/zh

Go 基本数据类型

一、内置类型 1、值类型&#xff1a; bool int(32 or 64),int8,int16,int32,int64 uint(32 or 64),uint8(byte),uint16,uint32,uint64 float32,float64 string complex64,complex128 array //固定长度的数组2、引用类型&#xff1a;&#xff08;指针类型&#xff09; sli…

【Element】el-switch开关 点击弹窗确认框时状态先改变----点击弹窗取消框失效

一、背景 需求&#xff1a;在列表中添加定期出账的开关按钮&#xff0c;点击开关时&#xff0c;原来的状态不改变&#xff0c;弹出弹窗&#xff1b;点击弹窗取消按钮&#xff1a;状态不改变&#xff0c;点击弹窗确定按钮&#xff1a;状态改变&#xff0c;并调取列表数据刷新页…

LINUX入门篇【10】---进程篇【2】---进程状态

前言&#xff1a; 有了上一篇关于进程的初步认识和我们的PCB第一个数据段–标识符的讲解&#xff0c;接下来我们将继续讲解PCB的其他数据段&#xff0c;本篇要讲的是进程状态。 进程状态&#xff1a; 就像我们写贪吃蛇的时候&#xff0c;构建的游戏状态来判定游戏结束的方式…

vue实现对话框指定某个对话内容的滚动到指定位置(滚动到可视区域的中间位置)

1、使用el-scrollbar实现定位滚动&#xff08;elementui组件库&#xff09; 如何滚动&#xff1a;参考链接 比如说指定某条对话内容滚动到可视区域的中间 html结构&#xff1a; <div class"chat-list" id"chat-list"><el-scrollbar ref"scro…

代码随想录算法训练营第六十天|84. 柱状图中最大的矩形

84. 柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 示例 1: 输入&#xff1a;heights [2,1,5,6,2,3] 输出&#xff1a;10 解释…

C--51--WiFi模块ESP-01S ( 路由服务器 )

ESP-01S当成服务器&#xff1a; 1、接线 &#xff08;接CH340接入pc&#xff09; USB转TTL插入电脑&#xff0c;TX/RX交叉接线&#xff0c;VCC接5V&#xff0c;GND接地 查询IP地址&#xff1a;ATCIFSR 2、建立AT指令使能连接 一、配置网络调试助手 协议类型&#xff1a;TCP C…

Linux——使用命令查看文件和文件夹数量

目录 一、相关命令参数解析二、查看当前目录下的文件数量2.1 包含子目录中的文件2.2 不包含子目录中的目录 三、查看当前目录下的文件夹个数3.1 不包含目录中的目录3.2 包含目录中的目录 四、查看当前文件夹下叫某某的文件的数量实例 五、总结 一、相关命令参数解析 "&qu…