likes
comments
collection
share

Vue3中props和defineEmit的区别

作者站长头像
站长
· 阅读数 255

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

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

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


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

Vue3中props和defineEmit的区别

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

Vue3中props和defineEmit的区别

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

Vue3中props和defineEmit的区别

这是整体的页面结构:

Vue3中props和defineEmit的区别

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

一.通过Props

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

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

Vue3中props和defineEmit的区别

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

Vue3中props和defineEmit的区别

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

Vue3中props和defineEmit的区别

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


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


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

Vue3中props和defineEmit的区别

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

Vue3中props和defineEmit的区别

5.回到页面看看效果。

Vue3中props和defineEmit的区别

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

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

Vue3中props和defineEmit的区别

Vue3中props和defineEmit的区别

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

Vue3中props和defineEmit的区别

二.emit

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

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

Vue3中props和defineEmit的区别

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

Vue3中props和defineEmit的区别

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

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

Vue3中props和defineEmit的区别

Vue3中props和defineEmit的区别

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

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

Vue3中props和defineEmit的区别

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

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

4.回到子组件内,我们使用defineEmits来接收。Vue3中props和defineEmit的区别

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

Vue3中props和defineEmit的区别

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

Vue3中props和defineEmit的区别

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

Vue3中props和defineEmit的区别

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

Vue3中props和defineEmit的区别

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

Vue3中props和defineEmit的区别

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

Vue3中props和defineEmit的区别

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

总结

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

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