Добрый день. Столкнулся со следующей проблемой:
Есть три однофайловых компонента vue c такой вложенностью: (4)дочка <= (1)родитель => (2)дочка(родитель 3-ей дочке) => (3)дочка
Т.е. 3-я дочка отрисовывается во 2-ой и после они вместе отрисовываются в 1-ом родителе + 4-я дочка.
Есть необходимость, чтобы кнопка расположенная в 3-ей дочке меняла переменную в 1-ом родителе... :)
т.е. нужно прыгнуть через 2-ой компонент..
Я менял структуру делал так: (4)дочка <= (2)дочка(родитель 3-ей дочке) => (3)дочка - и все это отрисовывается в 1-ом родителе.
Тогда переменная, которую необходимо менять находится уже во 2-ой дочке и у меня получается достучаться через this.$emit('name')
а вот если нужно прыгнуть через один уровень вложенности то такая схема не проходит..
Вот пример кода: необходимо изменить в родителе переменную show с false на true при нажатии на кнопку, в файле cal-panel.vue (3-дочка)
Родитель(1) - calendar.vue<template>
<div>
<add-event-modal v-if="show"></add-event-modal>
<vue-event-calendar :show="show" v-on:testqw="tester" :events="currentEvents"></vue-event-calendar>
</div>
</template>
<script>
import addEventModal from './addEventModal.vue';
import calEventItem from './vue-event-calendar/src/components/cal-event-item.vue'
export default {
data ()
{
return {
show: false
}
},
components:
{
addEventModal
},
methods:{
tester: function (value) {
this.show = value;
}
}
}
</script>
Дочка(2) -vue-event-calendar.vue<template>
<div class="__vev_calendar-wrapper">
<cal-panel> </cal-panel>
<cal-events></cal-events>
</div>
</template>
<script>
import { isEqualDateStr} from './tools.js'
import addEventModal from './../../addEventModal.vue';
import calEvents from './components/cal-events.vue'
import calPanel from './components/cal-panel.vue'
export default {
name: 'vue-event-calendar',
components: {
'cal-events': calEvents,
'cal-panel': calPanel,
'add-event-modal': addEventModal
}
}
</script>
Дочка(3) - cal-panel.vue<template>
<div>
<button v-on:click="addEvent" v-if="date.status" class="dates-btn" type="submit"><i class="fa fa-plus" aria-hidden="true"></i></button>
</div>
</template>
<script>
import i18n from '../i18n.js'
import { dateTimeFormatter, isEqualDateStr} from '../tools.js'
export default {
name: 'cal-panel',
data () {
return {
i18n,
show: true
}
},
methods: {
addEvent: function () {
this.$emit("testqw", this.show);
}
}
