Vue 2.0 API vm$emit 的简单理解

版权声明:本文为博主原创文章,未经博主允许不得转载。 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!');
                }
            }
        })

如下例子:

猜你喜欢

转载自blog.csdn.net/sinat_34524528/article/details/83383172