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,好像这东西就是我的一样!

相关文章
|
5天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
109 64
|
5天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
|
27天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
56 7
|
28天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
47 3
|
27天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
46 1
|
27天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
49 1
|
1月前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
12天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
28 1
vue学习第四章
|
12天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
25 1
vue学习第九章(v-model)
|
12天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
27 1
vue学习第十章(组件开发)