Vue3中props和defineEmit的区别

简介: Vue3中props和defineEmit的区别

由于之前写的项目都是基于react来开发和思考的,转到vue中从来未接触过emit这个概念,官方的文档写的也不是特别清楚,(也或许是我的思想还尚未从react的编程理念中转出来)查阅了很多作者关于emit的解释,但从他们的回答中也并不能理解的特别透彻。

好在这几天通过公司项目的练手,自己又查阅了一些视频,终于明白了这个方法的基本逻辑。如果你是react转vue,那么本文将对你有很大的帮助;如果你是vue的初学者,也不要害怕,本文尽可能使用“说人话”的角度去解释。

阅读本文的前提条件,你需要对父子组件通讯,靠props来实现这个概念有较好的理解。本文章将对propsemit的区别进行讲解,来让你彻底明白emit到底是个什么东西,篇幅较长,耐心一点,学习知识切忌急功近利。

1.在这里我们准备一个App组件作为父组件和一个useEmit.vue文件作为子组件。(其他文件不需要看,都是我之前练习使用的。)

image.png

App组件的结构也非常简单,

image.png

useEmit组件的结构就一个按钮,

image.png

这是整体的页面结构:

image.png

2.这时候提出我们的需求,现在子组件内有一个变量name,需要渲染到父组件内,我们如何处理?(在这里我们不考虑变量提升)

一.通过Props


大致的思路其实很简单,就是父组件提供一个函数,通过props传递给子组件,子组件通过调用这个函数,来将自己的变量给父组件传递过去。

1.我们在App组件内定义一个函数。

image.png

2.思考:这个函数肯定需要一个参数去接收儿子传递过来的信息。ok,当我们拿到以后,我们就去打印一下看看。

image.png

3.接下来就是传递给子组件,在自组件去调用就行。vue里需要注意,传递变量的时候需要在属性前面加:,来告诉vue我后面双引号里传递的是一个变量。

image.png

注意:这里和react不一样的地方在于,也是我认为设计不好的一个地方,由于vue使用双引号的地方很多,非常容易让人产生疑惑,刚开始看公司代码的时候,由于那时候不知道vue的设计理念,经常不知道到底这个东西是字符串还是变量

这里额外穿插一下知识,在react里传递props,如果是传递变量,就会用{}来表示,字符串就用""

image.png

4.子组件就得去接收这个方法,回到子组件。这里通过vue3的definProps去拿,并且定义好要传给父组件的变量name。不清楚这个方法的可以看我上一篇文章。

image.png

在子组件身上<button>按钮绑定点击事件为调用这个方法。

image.png

5.回到页面看看效果。

image.png

控制台正确打印出了子组件的变量,下一步就是回到父组件去用变量接收即可。

6.,在App组件定义一个sonNames来接就完事了

image.png

image.png

然后点击按钮可以正常显示。

image.png

二.emit


1.让我们回到父组件 首先我们要搞明白---js原生事件这个名词和vue中提出的理念---自定义事件的区别。

我们在父组件里定义了一个函数

image.png

然后直接在子组件身上绑定这个点击事件

image.png

这个@click其实就是代表着onclick这个原生js里原汁原味的那个鼠标点击事件。

2.那我突然觉得click这几个字母好难看,我不喜欢怎么办?那我可不可以不写click这几个字母,写成myDIY可以吗?我们试一试。

image.png

image.png

页面也好好的,控制台也没报错,vscode里也没报错,好神奇。那么问题来了,这个myDIY事件原生js里没有啊,你也没办法触发啊?什么?你说我点几下不就完事了? 很遗憾,浏览器不认识这个myDIY事件,你说他就是点击事件,那浏览器还觉得它是键盘事件呢。

3.这时候子组件的props里也并没有myDIY这个属性。

image.png

一定要转变自己的观念,这个写法看起来好像是父组件给子组件传递东西,但是并不是。你暂时可以理解为子组件抢了父组件的方法getChildrenName准备拿来自己用(对,没错,我就是这样理解的!一本正经)为什么说准备呢?因为目前为止,你没办法触发这个myDIY事件。

ok,emit来了,这时候我再强调一点,一定一定注意,这不是父组件向子组件传递方法!!!而是子组件准备自给自足

4.回到子组件内,我们使用defineEmits来接收。

image.png

你都学Vue3了,我默认你应该会TS的哦,应该可以看出来什么意思吧?我们正在约束emit函数的类型,emit它是一个函数,它接收的第一个参数就是你自定义的那个事件也就是myDIY,它没有返回值所以就是void

image.png

稍等,我们看一下,好像有错误

image.png

错误是App组件传过来的,我们回过头看看子组件抢过来的函数好像需要一个参数而我们definEmit中好像并没给它传递参数

image.png

接下来返回子组件,给它加上。

image.png

5.ok,然后再给子组件的button绑定上我们刚刚抢过来的那个函数

image.png

6.大功告成,点击按钮也可以正确展示子组件的name

image.png

7.其实感觉有点像Object.prototype.call这方法的味儿了,emit好像就是那个call,改变了父组件定义函数的指向,并且可以传递自己的参数。

总结

1.通过props来给父组件传东西,子组件始终用的都是别人的东西。

2.通过emit,好像这东西就是我的一样!

相关文章
|
6天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
103 10
|
4月前
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
733 5
|
1月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
245 1
|
1月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
144 0
|
2月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
95 0
|
4月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1500 0
|
移动开发 JavaScript 小程序
Vue3 与 Vue2 的Props、全局组件的异同点
Vue3 Props Props 是任何现代 JS 框架的重要组成部分。在组件之间传递数据的能力是Vue项目的基本要素。 Vue3 中,在组件中访问Props的方式与 Vue2 会有所不同。
401 0
Vue3 与 Vue2 的Props、全局组件的异同点
|
8天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
103 2
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
529 0
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能