Vue3中props和defineEmit的区别

由于之前写的项目都是基于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。不清楚这个方法的可以看我上一篇文章。

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

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来给父组件传东西，子组件始终用的都是别人的东西。

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