Vue2+Vue3组件间通信方式汇总(2)------$emit

组件间通信方式是前端必不可少的知识点,前端开发经常会遇到组件间通信的情况,而且也是前端开发面试常问的知识点之一。接下来开始组件间通信方式第二弹------$emit,并讲讲分别在Vue2、Vue3中的表现。

Vue2+Vue3组件间通信方式汇总(1)------props

一、$emit,子组件调用父组件的方法(也叫自定义事件)

------Vue2

       两种接收(绑定事件)方式一种:自定义事件:@child="father"形式 ,当然原生事件的修饰也可以用在自定义事件上:once\prevent\stop\capture\self\passive;另一种:ref, this.$refs.child.$on("child",对应父组件方式this.father),当然$on也可以换成其他绑定指令如:$once 。

       第一种:用自定义事件的方式接受子组件的调用。

父组件:

<template><div><child @childFunc="fatherFunc"></child></div>
</template>
<script>
import Child from './Child.vue'export default{components:{Child },data(){
return{}
},methods:{fatherFunc(data){console.log("儿子:",data,"爸爸:",'hello,儿子!')}}
}
</script>

子组件:

<template><div><button @click="baba">儿子呼唤道:“爸爸!”</button>
</div>
</template>
<script>export default{data(){return{papa"爸爸!"}},methods:{baba(){this.$emit("childFunc",this.papa);}}
}
</script>

         第二种,通过ref+$on的方式接收子组件的方法调用:

父组件:

<template><div><child ref="childName"></child></div>
</template>
<script>
import Child from './Child.vue'export default{components:{Child },data(){
return{}
},
moumted(){    this.$refs.childName.$on("childFunc",this.fatherFunc(data));
//这个绑定事件的方法比上一种更灵活,上一种DOM一挂载就绑定了事件,
//而这一种可以延迟时间绑定,比如添加定时器}methods:{fatherFunc(data)  console.log("儿子:",data,"爸爸:",'hello,儿子!')}}
}
</script>

子组件:不变

题外话:自定义事件解绑方式:

this.$off():不传参数,表示解绑所有自定义事件,加参数的话,里面放数组,数组装要解绑的事件名称。

this.$destroy():相当于vue生命周期里面的beforeDistroy,销毁了data里面的数据,销毁了自定义事件,注意没有销毁原生事件。

-------vue3

注意:1、setup中没有this,也就是说没有vue实例vm,也没有组件实例vc,所以通过this.$refs获取子组件属性和方法行不通,因此在则会方面,vue2和vue3使用有一定区别。

           2、在Vue2中,在子组件标签中放@click,默认是自定义事件,用”.native“修饰”@click.native=“将click事件标记成原生DOM事件。而在Vue3中,@click事件默认是原生DOM事件,如何标记成自定义事件?在defineEmits函数中加上click。总结一句,Vue2默认自定义事件,Vue3默认是原生DOM事件。

          3、Vue3去掉了$on

          4、defineEmits和defineProps一样,都是不用引入,直接可以使用的

操作过程简述:

 父组件:

<template><div><child @childFunc="fatherFunc"></child></div>
</template>
<script setup lang="ts">
import Child from './Child.vue'
let fatherFunc=(data)=>{console.log("爸爸说:",data)}
</script>

子组件:

<template><div><button @click="baba">点击</button>
</div>
</template>
<script setup lang="ts">
import ref from "vue"
var data=ref("儿子,早上好!");
var $emit=defineEmits(["childFunc"])
let baba=()=>{$emit("childFunc",data.value)}
</script>

点击子组件按钮结果:控制台打印:爸爸说:儿子,早上好!

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

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

相关文章

【C++】STL 容器 - stack 堆栈容器 ① ( stack 堆栈容器特点 | stack 堆栈容器与 deque 双端数组容器对比 | 简单示例 )

文章目录 一、 stack 堆栈容器简介1、stack 堆栈容器引入2、stack 堆栈容器特点3、stack 堆栈容器与 deque 双端数组容器对比 二、 代码示例 - stack 堆栈容器简单示例1、代码示例2、执行结果 一、 stack 堆栈容器简介 1、stack 堆栈容器引入 C 语言中的 STL 标准模板库 中的 s…

ABS210-ASEMI手机适配器整流桥ABS210

编辑&#xff1a;ll ABS210-ASEMI手机适配器整流桥ABS210 型号&#xff1a;ABS210 品牌&#xff1a;ASEMI 封装&#xff1a;ABS-4 特性&#xff1a;贴片、整流桥 最大平均正向电流&#xff1a;2A 最大重复峰值反向电压&#xff1a;1000V 恢复时间&#xff1a;&#xff…

步兵 cocos2dx 加密和混淆

文章目录 摘要引言正文代码加密具体步骤代码加密具体步骤测试和配置阶段IPA 重签名操作步骤 总结参考资料 摘要 本篇博客介绍了针对 iOS 应用中的 Lua 代码进行加密和混淆的相关技术。通过对 Lua 代码进行加密处理&#xff0c;可以确保应用代码的安全性&#xff0c;同时提高性…

paddle 54 从PaddleClas2.5初始化模型用于迁移学习(LeViT、ReXNet、EfficientNet等)

随着PaddleClas版本代码的迭代,博主以前的一些代码在使用上出现了bug,导致无法初始化模型,具体涉及paddle 42 将任意paddleclas模型作为paddledetection中的backbone使用代码的使用,为此重新对最新的PaddleClas代码进行梳理,实现重新初始化PaddleClas中的模型。 在迁移学…

Xcode15 iOS 17 Simulator 离线安装,模拟器安装

Xcode 15 安装包的大小相比之前更小&#xff0c;因为除了 macOS 的 Components&#xff0c;其他都需要动态下载安装&#xff0c;否则提示 iOS 17 Simulator Not Installed。 如果不安装对应的运行模拟库 无法真机和模拟器运行&#xff0c;更无法新建项目。但是由于模拟器安装包…

Jenkins 插件管理指南

目录 常用插件 插件安装 已安装插件 installed plugins 常用插件 Docker Plugin&#xff1a; 这个插件让Jenkins能够与Docker容器平台进行集成。它允许在Jenkins构建过程中创建、管理和销毁Docker容器&#xff0c;为需要Docker化的项目提供了极大的便利性。对于需要在容器中…

C语言—每日选择题—Day54

指针相关博客 打响指针的第一枪&#xff1a;指针家族-CSDN博客 深入理解&#xff1a;指针变量的解引用 与 加法运算-CSDN博客 第一题 1. 存在int类型变量x&#xff0c;y&#xff0c;z&#xff0c;其对应值为x0x59&#xff0c;y0x39&#xff0c;z0x6E&#xff0c;则x * y z的值…

反序列化漏洞原理、成因、危害、攻击、防护、修复方法

反序列化漏洞是一种安全漏洞&#xff0c;它允许攻击者将恶意代码注入到应用程序中。这种漏洞通常发生在应用程序从不安全的来源反序列化数据时。当应用程序反序列化数据时&#xff0c;它将数据从一种格式&#xff08;例如JSON或XML&#xff09;转换为另一种格式&#xff08;例如…

Redis原理

&#x1f307;个人主页&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;命运给你一个低的起点&#xff0c;是想看你精彩的翻盘&#xff0c;而不是让你自甘堕落&#xff0c;脚下的路虽然难走&#xff0c;但我还能走&#xff0c;比起向阳而生&#xff0c;我更想尝试逆风…

广州华锐互动:VR元宇宙技术为汽车行业带来革命性变化

随着科技的飞速发展&#xff0c;VR元宇宙技术已经深入影响到我们生活的方方面面&#xff0c;汽车行业更是深受其益。这一新兴技术的出现&#xff0c;为汽车行业带来了前所未有的变化。广州华锐互动将VR技术应用于汽车行业&#xff0c;研发了VR汽修培训、3D汽车展厅、特种车辆3D…

Redis的五种存储类型以及常用的用途

String 存储session、token&#xff0c;地址信息&#xff0c;分布式锁的实现 list 列表 set 共同关注、共同好友 Hsah 购物车信息 zset 排行榜

【NI-RIO入门】理解Windows、Real Time与FPGA之间数据通信的原理

于NI kb摘录 1.概述 对于NI RIO系列设备&#xff08;CompactRIO、sbRIO、myRIO等&#xff09;进行编程时&#xff0c;需要注意有三个不同的组件。 人机界面 (HMI) 。有时称为“主机”&#xff0c;为用户提供图形用户界面&#xff08;GUI&#xff09;&#xff0c;用于监控系统…

若依vue如何展示一个HTML页面(或者展示Markdown文档)

一. 前言 ⚠ 本文是展示Markdown的方法,不能直接前端编辑Markdown文档. 二. 准备部分 用Typora编辑器打开需要导出html页面,我这里使用Typora来导出 1. 先将md文件导出成html 2. 将导出好的文件放在若依vue的pubilc下(文件可以是中文) 三. 代码部分 1.使用v-html来展示HT…

【ubuntu 22.04】安装中文版系统、中文语言包和中文输入法

在系统安装中的键盘布局选择时&#xff0c;选择Chinese - Chinese&#xff0c;此时会自动安装所有的中文语言包和ibus中文输入法系统安装成功重启后&#xff0c;点击设置 - 区域和语言 - 管理已安装的语言 * 根据提示安装更新后&#xff0c;将汉语&#xff08;中国&#xff09;…

HarmonyOS构建第一个ArkTS应用(Stage模型)

构建第一个ArkTS应用&#xff08;Stage模型&#xff09; 创建ArkTS工程 若首次打开DevEco Studio&#xff0c;请点击Create Project创建工程。如果已经打开了一个工程&#xff0c;请在菜单栏选择File > New > Create Project来创建一个新工程。 选择Application应用开发…

基于空间三维网格划分的点云精简(格网重心、格网重心最近点)

一、相关介绍 点云格网包括二维格网以及三维格网,主要用于数据降维、压缩或者分块聚类处理等。二维格网是投影原理,取某一坐标轴为0,将另外两个周进行投影,按坐标轴进行划分即可;三维格网则是划分体素,与空间八叉树原理基本类似。 二、计算方法 三维格网可以根据尺寸划分…

数据库编程大赛:一条SQL计算扑克牌24点

你是否在寻找一个平台&#xff0c;能让你展示你的SQL技能&#xff0c;与同行们一较高下&#xff1f;你是否渴望在实战中提升你的SQL水平&#xff0c;开阔你的技术视野&#xff1f;如果你对这些都感兴趣&#xff0c;那么本次由NineData主办的《数据库编程大赛》&#xff0c;将是…

es6的async await的控制并发,简化错误处理,链式调用

1.与高阶函数结合使用 // 异步过滤函数 async function asyncFilter(array, predicate) {const results await Promise.all(array.map(predicate));return array.filter((_value, index) > results[index]); }// 示例 async function isOddNumber(n) {await delay(100); /…

14 款最佳文件恢复软件 [2024 年最佳精选工具]

顶级文件恢复软件的综合列表和比较。阅读此详细评论以选择最佳文件恢复工具并轻松恢复您的文件&#xff1a; 您在选择文件恢复工具时遇到困难吗&#xff1f;在阅读了对十大文件恢复软件的评论后&#xff0c;您可以做出正确的决定。 数据丢失是一个严重的问题&#xff0c;会损…

Leetcode—1491.去掉最低工资和最高工资后的工资平均值【简单】

2023每日刷题&#xff08;六十八&#xff09; Leetcode—1491.去掉最低工资和最高工资后的工资平均值 实现代码 class Solution { public:double average(vector<int>& salary) {double sum 0;int n salary.size();sort(salary.begin(), salary.end());for(int i…