$emit(event, args )

引數：

event：事件名

args：事件相關引數

用法：

觸發當前例項上的事件。附加引數都會傳給監聽器回撥。

在元件模板中，不能直接通過 v-on 繫結觸發 vue 例項中的方法，而需要先使用$emit( ) 繫結自定義事件，把自定義事件發射出去（發射到html 層面）；

然後在html 層面，元件自定義元素上，繫結自定義事件和vue 例項中的方法，以此實現元件和vue 例項方法的繫結。

click--> $emit('welcome'),  welcome --> sayHi 

元件模板部分： 

Vue.component('welcome-button', {
  template: `
     <button v-on:click="$emit('welcome')">
      Click me to be welcomed
    </button>
  `
})
 

 html 程式碼部分：

<welcome-button v-on:welcome="sayHi">

 vue 例項部分：

new Vue({
  ...
  methods: {
    sayHi: function(){
                     alert('Hi!')
    }
  }
})

 無引數例子：

<!--<a-button> 是一個元件，只能繫結自定義事件 v-on:welcome="sayHi",不能直接繫結原生事件click-->
<div id="div"><welcome-button v-on:welcome="sayHi"></welcome-button></div>

<script>

Vue.component("welcome-button",{
//元件內部的dom元素<button> 可以直接繫結原生事件click，然後把原生事件click和自定義事件"welcome"綁在一起。
//$emit( ) 方法是觸發當前例項的裡面的方法（這裡是觸發了welcome 這個自定義事件(方法)）
template:`<button v-on:click="$emit('welcome')">點選通過emit( )觸發事件</button>`
})

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


</script>
 

解析：

<a-button> 是一個元件，只能繫結自定義事件 v-on: welcome="sayHi", 不能直接繫結原生事件click

所以通過 $emit 繫結 

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

元件模板層面：元件內部的dom元素<button> 可以直接繫結原生事件click，但是無法直接觸發vue 例項中的 "sayHi"，而是先要把原生事件click和自定義事件"welcome"綁在一起。把 "welcome" 自定義事件發射到 html 層面
html 程式碼層面：

然後在 元件自定義元素<a-button> 使用 v-on， 繫結自定義事件 "welcome" 和例項中的 "sayHi"方法

$emit( ) 方法是觸發當前例項的裡面的方法（這裡是觸發了welcome 這個自定義事件(方法)） ，再傳給 v-on 觸發vue例項的 "sayHi" 方法

Vue.component("welcome-button",{
template:`<button v-on:click="$emit('welcome')">點選通過emit( )觸發事件</button>`
})

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

 網頁效果：

例項中的 "sayHi" 函式，已經通過  click--> $emit('welcome'),  welcome --> sayHi   觸發了

 

疑問："welcome" 這個自定義事件名怎麼來的？在例項和元件中都沒有看到有"welcome"字元？

在用 v-on 繫結的時候 <button v-on:click="welcome" > 和 <a-button v-on:welcome="sayHi">

產生連線時，生成的自定義事件名。其實這個welcome 事件繫結的就是例項裡面 sayHi 這個函式