版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_34524528/article/details/83383172
https://cn.vuejs.org/v2/api/#vm-emit
将组件中的点击事件与其关联的方法解耦。
组件声明时中不指定响应的方法,使用组件时再指定。
Vue.component('reply-button', {
template: `
<button v-on:click="$emit('reply')">
Click here to reply in one word.
</button>
`
})
<div id="app">
<p>
爱:
<reply-button v-on:reply="love"></reply-button>
</p>
<p>
恨:
<reply-button v-on:reply="hate"></reply-button>
</p>
</div>
new Vue({
el: '#app',
methods: {
love: function () {
alert('Love~')
},
hate: function () {
alert('Hate!');
}
}
})
如下例子: