$emit( ) 触发组件（自定义元素）当前实例的事件

$emit(event, args )

用法：

触发当前实例上的事件。附加参数都会传给监听器回调。

参数：

event：事件名

args：事件相关参数

 无参数例子：

<!--<a-button> 是一个组件，只能绑定自定义事件 v-on:welcome="sayHi",不能直接绑定原生事件click-->
<div id="div"><a-button v-on:welcome="sayHi"></a-button></div>

<script>

Vue.component("a-button",{
//组件内部的dom元素<button> 可以直接绑定原生事件click，然后把原生事件click和自定义事件"welcome"绑在一起。
//$emit( ) 方法是触发当前实例的里面的方法（这里是触发了welcome 这个自定义事件(方法)）
template:`<button v-on:click="welcome" >点击通过emit( )触发事件</button>`
})

new Vue({
   el:"#div",
   methods:{sayHi:function(){
   alert("hi")}
   }
  })


</script>

解析：

<a-button> 是一个组件，只能绑定自定义事件 v-on: welcome="sayHi", 不能直接绑定原生事件click

<div id="div"><a-button v-on:welcome="sayHi"></a-button></div>

组件内部的dom元素<button> 可以直接绑定原生事件click，然后把原生事件click和自定义事件"welcome"绑在一起。
$emit( ) 方法是触发当前实例的里面的方法（这里是触发了welcome 这个自定义事件(方法)） 

Vue.component("a-button",{
template:`<button v-on:click="welcome" >点击通过emit( )触发事件</button>`
})

new Vue({
   el:"#div",
   methods:{sayHi:function(){
   alert("hi")}
   }
  })

 网页效果：

实例中的 "sayHi" 函数，已经通过  click--> welcome --> sayHi 触发了

 

疑问："welcome" 这个自定义事件名怎么来的？在实例和组件中都没有看到有"welcome"字符？

在用 v-on 绑定的时候 <button v-on:click="welcome" > 和 <a-button v-on:welcome="sayHi">

产生连接时，生成的自定义事件名。其实这个welcome 事件绑定的就是实例里面 sayHi 这个函数