在组件上发出自定义事件

Question

我正在遵循vuejs.org上的Component Basics指南，但是我无法按照指导产生结果。我不知道是将methods属性放在组件上还是放在根Vue实例上。

当我将方法onIncreaseCount放入组件时，会引发错误。

但是当我将方法onIncreaseCount放到root Vue实例中时，虽然没有错误，但是单击按钮后没有任何作用。

// JS
Vue.component('button-counter', {
    data: function(){ return {count: 0} }
    template: `<button v-on:click="$emit('increase-count')">You clicked me {{ count }} times.</button>`,
    methods: {
        onIncreaseCount: function(){ this.count++ }
    }
})
new Vue({
    el: "#main"
})
// HTML
<main class="main" id="main">
    <button-counter title="Example component" @increase-count="onIncreaseCount"></button-counter>
</main>

我希望每次单击按钮都会增加{{ count }}值，但不会改变。

Answer 1

您不需要任何调用jsut的调用

处理组件本身

// JS
Vue.component('button-counter', {
    data: function(){ return {count: 0} }
    template: `<button v-on:click="increaseCount">You clicked me {{ count }} times.</button>`,
    methods: {
        increaseCount: function(){ this.count++ }
    }
})
new Vue({
    el: "#main"
})
// HTML
<main class="main" id="main">
    <button-counter title="Example component"></button-counter>
</main>