Я пытаюсь получить метод для выполнения на родительском компоненте при нажатии кнопки в одном из его дочерних компонентов. Я использую отдельные компоненты файлов с помощью Webpack. Вот код для компонента ребенка:Не удается получить метод для выполнения родительского компонента из дочернего компонента
<template>
<button v-on:click="add">Click</button>
</template>
<script>
export default {
methods: {
add:() => {
console.log('foo')
this.$dispatch('addClick')
}
}
}
</script>
И код для родителя:
<template>
<div id="app">
<count :total="total"></count>
<click></click>
</div>
</template>
<script>
import count from './components/count.vue'
import click from './components/click.vue'
export default {
components: {
count,
click
},
data:() => {
return {
total: 0
}
},
methods: {
addToTotal:() => {
console.log('bar')
this.total += 1
}
},
events: {
addClick: 'addToTotal'
}
}
</script>
count
компонент просто h1 элемент, который отображает переменную total
. Когда я нажимаю кнопку, «foo» записывается на консоль, но «bar» не работает, и общее число не изменяется. Любые идеи о том, что я делаю неправильно? Заранее спасибо!
Вы используете лямбда-нотации, которая, вероятно, портя ваш 'this'. Вместо этого попробуйте 'function'. –