因为之前写的我的项目都是基于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，如同这货色就是我的一样！