$emit( ) 觸發元件(自定義元素)當前例項的事件
$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 程式碼層面:
$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 這個函式