由于之前写的项目都是基于react来开发和思考的,转到vue中从来未接触过emit
这个概念,官方的文档写的也不是特别清楚,(也或许是我的思想还尚未从react的编程理念中转出来)查阅了很多作者关于emit
的解释,但从他们的回答中也并不能理解的特别透彻。
好在这几天通过公司项目的练手,自己又查阅了一些视频,终于明白了这个方法的基本逻辑。如果你是react转vue,那么本文将对你有很大的帮助;如果你是vue的初学者,也不要害怕,本文尽可能使用“说人话”的角度去解释。
阅读本文的前提条件,你需要对父子
组件通讯,靠props
来实现这个概念有较好的理解。本文章将对props
和emit
的区别进行讲解,来让你彻底明白emit
到底是个什么东西,篇幅较长,耐心一点,学习知识切忌急功近利。
1.在这里我们准备一个App
组件作为父组件和一个useEmit.vue
文件作为子组件。(其他文件不需要看,都是我之前练习使用的。)
文章图片
App
组件的结构也非常简单,
文章图片
useEmit
组件的结构就一个按钮,
文章图片
这是整体的页面结构:
文章图片
2.这时候提出我们的需求,现在子组件内有一个变量name
,需要渲染到父组件内,我们如何处理?(在这里我们不考虑变量提升)
一.通过Props
大致的思路其实很简单,就是父组件提供一个函数,通过props
传递给子组件,子组件通过调用这个函数,来将自己的变量给父组件传递过去。
1.我们在App组件内定义一个函数。
文章图片
2.思考:这个函数肯定需要一个参数去接收儿子传递过来的信息。ok,当我们拿到以后,我们就去打印一下看看。
文章图片
3.接下来就是传递给子组件,在自组件去调用就行。vue里需要注意,传递变量的时候需要在属性前面加:
,来告诉vue我后面双引号里传递的是一个变量。
文章图片
注意:这里和react不一样的地方在于,也是我认为设计不好的一个地方,由于vue使用双引号的地方很多,非常容易让人产生疑惑,刚开始看公司代码的时候,由于那时候不知道vue的设计理念,经常不知道到底这个东西是字符串还是变量
这里额外穿插一下知识,在react里传递props,如果是传递变量,就会用{}
来表示,字符串就用""
文章图片
4.子组件就得去接收这个方法,回到子组件。这里通过vue3的definProps
去拿,并且定义好要传给父组件的变量name
。不清楚这个方法的可以看我上一篇文章。
文章图片
在子组件身上按钮绑定点击事件为调用这个方法。
文章图片
5.回到页面看看效果。
文章图片
控制台正确打印出了子组件的变量,下一步就是回到父组件去用变量接收即可。
6.,在App
组件定义一个sonNames
来接就完事了
文章图片
文章图片
然后点击按钮可以正常显示。
文章图片
二.emit
1.让我们回到父组件
首先我们要搞明白---js原生事件这个名词和vue中提出的理念---自定义事件的区别。
我们在父组件里定义了一个函数
文章图片
然后直接在子组件身上绑定这个点击事件
文章图片
这个@click
其实就是代表着onclick
这个原生js
里原汁原味的那个鼠标点击事件。
2.那我突然觉得click
这几个字母好难看,我不喜欢怎么办?那我可不可以不写click
这几个字母,写成myDIY
可以吗?我们试一试。
文章图片
文章图片
页面也好好的,控制台也没报错,vscode
里也没报错,好神奇。那么问题来了,这个myDIY
事件原生js
里没有啊,你也没办法触发啊?什么?你说我点几下不就完事了?
很遗憾,浏览器不认识这个myDIY
事件,你说他就是点击事件,那浏览器还觉得它是键盘事件呢。
3.这时候子组件的props里也并没有myDIY
这个属性。
文章图片
一定要转变自己的观念,这个写法看起来好像是父组件给子组件传递东西,但是并不是。你暂时可以理解为子组件抢了父组件的方法getChildrenName
准备拿来自己用(对,没错,我就是这样理解的!一本正经)为什么说准备呢?因为目前为止,你没办法触发这个myDIY
事件。
ok,emit
来了,这时候我再强调一点,一定一定注意,这不是父组件向子组件传递方法!!!而是子组件准备自给自足
4.回到子组件内,我们使用defineEmits
来接收。
文章图片
你都学Vue3了,我默认你应该会TS
的哦,应该可以看出来什么意思吧?我们正在约束emit
函数的类型,emit
它是一个函数,它接收的第一个参数就是你自定义的那个事件也就是myDIY
,它没有返回值所以就是void
。
文章图片
稍等,我们看一下,好像有错误
文章图片
错误是App
组件传过来的,我们回过头看看子组件抢过来的函数好像需要一个参数而我们definEmit
中好像并没给它传递参数
文章图片
接下来返回子组件
,给它加上。
文章图片
5.ok,然后再给子组件的button
绑定上我们刚刚抢过来的那个函数
文章图片
6.大功告成,点击按钮也可以正确展示子组件的name
文章图片
7.其实感觉有点像Object.prototype.call
这方法的味儿了,emit
好像就是那个call
,改变了父组件定义函数的指向,并且可以传递自己的参数。
总结
1.通过props
来给父组件传东西,子组件始终用的都是别人的东西。
【Vue3中props和defineEmit的区别】2.通过emit
,好像这东西就是我的一样!