Vue父子组件通信之$emit（基于vue2.5，ES6）

一、$emit的作用

在Vue中，父组件监听子组件触发的事件，需要在子组件用使用 $emit 触发，在父组件中使用 v-on: / @ 自定义事件监听。

二、有几点必须非常注意：

1、 vm.$emit( eventName, […args] ) 可以有两个参数；第一个参数必填，触发当前实例上的函数；第二个参数选填，是向函数传递的数据。

2、在vue中，事件名不存在自动化的大小写转换，触发事件名需要完全匹配监听这个事件所用的名称（驼峰就必须驼峰，短横线就必须短横线。）

3、父组件监听子组件触发的事件，不能用$on侦听子组件抛出的事件，而必须在模板里直接用v-on绑定子组件的事件。

三、现在我们一起来看看个例子吧（基于 vue: 2.5.2，ES2015）

【父组件】

【子组件】

四、解析代码

• 1、在子组件的按钮中绑定click事件giveAdvice，
  定义数据possibleAdvice的值；

• 2、在子组件中定义giveAdvice()函数;

• 3、将子组件 'MagicEightBall' 引入父组件，并在中绑定函数showAdvice，另命名为give-advice;

• 4、在父组件中定义 shouAdvice函数，作用是弹提示框。

• 5、在子组件中，将this.$emit添加到giveAdvice的最后一行，作用是触发父组件中的give-advice事件，并将randomAdviceIndex的值传给事件give-advice。

五、最后的呈现效果

点击按钮

出现弹框，内容在num1、numb2、number3里随机。