Вы не должны напрямую модифицировать состояние родительского компонента, это противоречит архитектуре однонаправленного потока данных. Вместо этого вы должны воспользоваться одной из следующих опций:
1. Отправка события
// parent.vue
<template>
<parent>
<child @toggle-button="toggleButtonHandler"/>
</parend>
</template>
<script>
export default {
data: {
return {
buttonShow: false
}
},
methods: {
toggleButtonHandler () {
this.buttonShow = !this.buttonShow
}
}
}
</script>
// child.vue
<template>
<button @click="clickHandler">Hide Button</button>
</template>
<script>
export default {
methods: {
clickHandler () {
this.$emit('toggle-button')
}
}
}
</script>
Первый аргумент обработчика это объект события, а метод
$emit принимает произвольные данные в качестве пейлоада события (второй аргумент обработчика).
2. Воспользоваться стором
// store.js
export default {
state: {
buttonShow: false
},
mutations: {
buttonToggle: state => (state.buttonShow = !state.buttonShow)
}
}
Механика работы в компопненте почти такая же, за тем исключением что обработчик клика в дочернем компоненте должен коммитить мутацию:
clickHandler () {
this.$store.commit('buttonToggle')
}
А родительский компненте, в свою очередь, избаваляется от подписки на
@toggle-button и больше не держит собственный стейт, а подписывается на стор:
computed: {
buttonShow () {
return this.$store.state.buttonShow
}
}
