綁定組件的自訂及原生事件
１．綁定組件的自訂事件
- 在父元素依然使用 @my-test="<method>" 或是 v-on:my-test="<method>" 來綁定事件
- 在組件中使用 this.$emit("<action name>","<action params>","<action params>") 通知元素發生一個指定事件
- 第一個參數是事件名稱
- 第二個含後面的參數都是發出的事件的參數，可以在接收端取得參數
<div id="app">
<test @my-test="action"></test>
</div>
new Vue({
el:"#app",
methods:{
action(value){
alert(value);
}
},
components:{
test:{
template:`
<div>
<button @click="onClick">button</button>
</div>
`,
methods:{
onClick(){
this.$emit("my-test","123");
}
}
}
}
});
２．綁定組件的原生事件
- 在父元素的 @click 後面加上 .native
- 若組件內有多個元素，每個元素都會觸發事件
<div id="app">
<test @click.native="action"></test>
</div>
