共计 2036 个字符，预计需要花费 6 分钟才能阅读完成。
因为之前写的我的项目都是基于 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，如同这货色就是我的一样！