Выдача пользовательских событий на компоненты

Question

Я следую руководству по основам компонентов на vuejs.org , но не могу получить результат в соответствии с указаниями.Я не знаю, помещать ли свойство methods в компонент или в корневой экземпляр Vue.

Когда я помещаю метод onIncreaseCount внутри компонента, выдается ошибка.

Но когда я помещаю метод onIncreaseCount в корневой экземпляр 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

вам не нужен emit 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>