Vue3父子组件数据传递

getCurrentInstance方法

Vue2中,可以通过this来获取当前组件实例;

Vue3中,在setup中无法通过this获取组件实例,console.log(this)打印出来的值是undefined。

在Vue3中,getCurrentInstance()可以用来获取当前组件实例。

let { proxy } = getCurrentInstance();

在setup中分别打印下面3个值,结果如下:

console.log(getCurrentInstance,typeof(getCurrentInstance));
console.log(getCurrentInstance(),typeof(getCurrentInstance()));
console.log(proxy,typeof(proxy));

可以看到,getCurrentInstance是一个function方法,getCurrentInstance()是一个对象,proxy也是一个对象。proxy是getCurrentInstance()对象中的一个属性,通过对象的解构赋值方式拿到proxy。

getCurrentInstance只能在setup或生命周期钩子中使用

用于线上环境使用方法:

方法1:

const instance = getCurrentInstance()
console.log(instance.appContext.config.globalProperties)

方法2:

const { proxy } = getCurrentInstance()  

$emit使用方法

许多Vue模式涉及使用props将数据从父组件传递到子组件。但如果我们需要一个子组件将数据传给它的父组件呢?

使用 emit,我们可以触发事件并将数据传递到组件的层次结构中。这对下面几种情况很有用,如:

  • 从 input 中发出数据
  • 从 modal 本身内部关闭 modal
  • 父组件响应子组件

Vue Emit是如何工作的?

当我们 emit 一个事件时,我们用一个或多个参数调用一个方法:

  • eventName: string - 事件的名称
  • values: any - 通过事件传递的参数

下面是一个内联 emit的例子,<button @click=“$emit(‘add’, Math.random())”>。emit一个名为add的事件,并将Math.random()的值作为参数传递出去。

然后,在父组件使用v-on或@指令可以监听我们的自定义添加事件并接收该参数值。

Child.vue

<template><button @click="$emit('add', Math.random())">Add Math.random()</button>
</template>

Parent.vue中监听:

<script setup>
import { ref } from 'vue'
const count = ref(0)
// 也可以从我们的模板中调用一个函数 `<ChildComponent @add="add" />
// const add = (i) => count.value += i
</script>
<template><ChildComponent @add="(i) => count += i" /> <p>Count: {{ count }}</p>
</template>

每次我们点击按钮,Child.vue 都会 emit 一个 add 事件,并带有一个0到1之间的随机值。 然后,Parent.vue 捕捉到这个事件,并将这个值添加到计数中。

可以传递任意多的参数,监听器也会收到所有的参数:

  • Child - $emit(‘add’, Math.random(), 44, 50)
  • Parent - @add=“(i, j, k) => count += i + j + k”

现在,我们知道如何在我们的模板中 emit 内联事件,但在更复杂的例子中,如果我们从SFC的script 中 emit 一个事件会更好。特别是当我们想在 emit 事件之前执行一些逻辑时,这很有用。

在Vue 3中,我们有2种不同的方法来做到这一点:

  • 选项API - this.$emit
  • 带有setup()的组合API - context.emit
  • 带有

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

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

相关文章

SoloX:Android和iOS性能数据的实时采集工具

SoloX&#xff1a;Android和iOS性能数据的实时采集工具 github地址&#xff1a;https://github.com/smart-test-ti/SoloX 最新版本&#xff1a;V2.7.6 一、SoloX简介 SoloX是开源的Android/iOS性能数据的实时采集工具&#xff0c;目前主要功能特点&#xff1a; 无需ROOT/越狱…

新型信息基础设施IP追溯:保护隐私与网络安全的平衡

随着信息技术的飞速发展&#xff0c;新型信息基础设施在全球范围内日益普及&#xff0c;互联网已经成为我们社会和经济生活中不可或缺的一部分。然而&#xff0c;随着网络使用的增加&#xff0c;隐私和网络安全问题也引发了广泛关注。在这个背景下&#xff0c;IP&#xff08;In…

Docker的学习记录

Docker是一个被广泛使用的开源容器引擎&#xff0c;基于Go语言&#xff0c;遵从Apache2.0协议开源。 docker的三个概念&#xff1a;容器、镜像和仓库。 镜像&#xff08;Image&#xff09;&#xff1a;镜像是Docker中的一个模板。通过 Docker镜像 来创建 Docker容器&#xff…

angular 在vscode 下的hello world

Angulai 是google 公司开发的前端开发框架。Angular 使用 typescript 作为编程语言。typescript 是Javascript 的一个超集&#xff0c;提升了某些功能。本文介绍运行我的第一个angular 程序。 前面部分参考&#xff1a; Angular TypeScript Tutorial in Visual Studio Code 一…

Java之线程池的详细解析

1. 线程池 1.1 线程状态介绍 当线程被创建并启动以后&#xff0c;它既不是一启动就进入了执行状态&#xff0c;也不是一直处于执行状态。线程对象在不同的时期有不同的状态。那么Java中的线程存在哪几种状态呢&#xff1f;Java中的线程 状态被定义在了java.lang.Thread.Stat…

工厂与观察者模式

工厂模式介绍 通过一个加工厂&#xff0c;在这个工厂中添加对应材料&#xff0c;我们就可以得到想要的东西&#xff0c;在程序设计中&#xff0c;这种模式就叫做工厂模式&#xff0c;工厂生成出的产品就是某个类的实例&#xff0c;也就是对象。 关于工厂模式一共有三种&#…

Qt::图层框架-图片图层-序列图层-QGraphicsPixmapItem

二维矢量动画智能制作软件开发合集 链接&#xff1a;软件开发技术分享及记录合集 个人开发二维矢量动画智能制作软件界面如下&#xff1a; 目录 一、图片序列图层原理 二、图片序列图层代码实现 三、图片序列图层软件测试视频 结束语 一、图片序列图层原理 本软件的11种…

C++11(列表初始化,声明,范围for)

目录 一、列表初始化 1、一般的列表初始化 2、容器的列表初始化 二、声明 1、 auto 2、decltype 3、nullptr 三、 范围for 一、列表初始化 1、一般的列表初始化 在C98中&#xff0c;标准允许使用花括号{}对数组或者结构体元素进行统一的列表初始值设定。 int main() {…

【OpenCV-Torch-dlib-ubuntu】Vm虚拟机linux环境摄像头调用方法与dilb模型探究

前言 随着金秋时节的来临&#xff0c;国庆和中秋的双重喜庆汇聚成一片温暖的节日氛围。在这个美好的时刻&#xff0c;我们有幸共同迎来一次长达8天的假期&#xff0c;为心灵充电&#xff0c;为身体放松&#xff0c;为未来充实自己。今年的国庆不仅仅是家国团聚的时刻&#xff…

scala基础入门

一、Scala安装 下载网址&#xff1a;Install | The Scala Programming Language ideal安装 &#xff08;1&#xff09;下载安装Scala plugins &#xff08;2&#xff09;统一JDK环境&#xff0c;统一为8 &#xff08;3&#xff09;加载Scala &#xff08;4&#xff09;创建工…

LabVIEW学习笔记五:错误,visa关闭超时(错误-1073807339)

写的串口调试工具&#xff0c;其中出现了这个错误 这是串口接收的部分&#xff0c;如果没有在很短的时间内收到外界发进来的数据&#xff0c;这里就会报错。 先在网上查了一下&#xff0c;这个问题很常见&#xff0c;我找到了官方的解答&#xff1a; VISA读取或写入时出现超时…

【JavaEE】CSS

CSS 文章目录 CSS语法引入方式内部样式表行内样式表外部样式 选择器基础选择器标签选择器类选择器id选择器通配符选择器 复合选择器后代选择器伪类选择器链接伪类选择器 字体设置设置文本颜色粗细样式文本对齐 背景背景颜色背景平铺背景尺寸 圆角矩形元素显示模式块级元素 盒模…

Pikachu靶场——XXE 漏洞

文章目录 1. XXE1.1 查看系统文件内容1.2 查看PHP源代码1.3 查看开放端口1.4 探测内网主机 1. XXE 漏洞描述 XXE&#xff08;XML External Entity&#xff09;攻击是一种利用XML解析器漏洞的攻击。在这种攻击中&#xff0c;攻击者通过在XML文件中插入恶意实体来触发解析器加载…

计算机图像处理-高斯滤波

高斯滤波 高斯滤波是一种线性平滑滤波&#xff0c;适用于消除高斯噪声&#xff0c;广泛应用于图像处理的减噪过程。通俗的讲&#xff0c;高斯滤波就是对整幅图像进行加权平均的过程&#xff0c;每一个像素点的值&#xff0c;都由其本身和邻域内的其他像素值经过加权平均后得到…

1340. 跳跃游戏 V;2039. 网络空闲的时刻;2767. 将字符串分割为最少的美丽子字符串

1340. 跳跃游戏 V 核心思想&#xff1a;动态规划记忆化搜索。定义dfs(i)&#xff0c;表示从i开始最多可以访问多少个下标&#xff0c;然后统计往左跳和往右边跳的最大值&#xff0c;思路其实比较简单&#xff0c;但是代码我感觉还是不太好想。 2039. 网络空闲的时刻 核心思想…

W5100S_EVB_PICO快速入门之MQTT篇(十二)

目录 1. 前言 2. MQTT介绍 2.1 什么是mqtt&#xff1f; 2.2 特点 2.3 应用场景 2.4 MQTT协议实现方式 3. 硬件及接线方式 3.1 硬件准备 3.2 硬件介绍 3.3 接线图 4. 测试 4.1 MQTT测试流程图 4.2 相关代码 4.3 测试现象 5. 相关链接&#xff1a; 1. 前言 随着物…

vue下载在前端存放的pdf文件

vue下载在前端存放的pdf文件 注意&#xff0c;这里要在public文件夹中新建文件夹存放静态资源&#xff0c;不能在src文件夹中新建文件夹存放静态资源&#xff0c;因为public文件夹中的文件资源不会被npm run build打包编译。大家打包一下&#xff0c;就会发现 模板.pdf文件 是存…

【C++入门指南】类和对象(上)

【C杂货店】类和对象&#xff08;上&#xff09; 一、面向过程和面向对象初步认识二、类的引入三、类的定义四、类的访问限定符及封装4.1 访问限定符4.2 封装 五、类的作用域六、类的实例化七、类对象模型7.1 类对象的存储规则7.2 例题7.3结构体内存对齐规则 八、this指针8.2 t…

第 114 场 LeetCode 双周赛题解

A 收集元素的最少操作次数 模拟: 反序遍历数组&#xff0c;用一个集合存当前遍历过的不超过 k k k 的正数 class Solution { public:int minOperations(vector<int> &nums, int k) {unordered_set<int> vis;int n nums.size();int i n - 1;for (;; i--) {if…

[Framework] Android Binder 工作原理

Binder 是 Android 系统中主要的 IPC 通信方式&#xff0c;其性能非常优异。但是包括我在内的很多开发者都对它望而却步&#xff0c;确实比较难&#xff0c;每次都是看了忘&#xff0c;忘了看&#xff0c;但是随着工作的时间约来越长&#xff0c;每次看也都对 Binder 有新的认识…