Groyreg
@Groyreg
Front-end

Изменение свойств родителя через дочерний элемент 2-ого уровня?

Добрый день. Столкнулся со следующей проблемой:
Есть три однофайловых компонента 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);
      }
}
  • Вопрос задан
  • 1226 просмотров
Решения вопроса 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Все стандартно, варианты:
1. Храним состояние в Vueх, при нажатии на кнопку отправляем новое состояние, через реактивность меняем в родителе
2. Ловим событие во vue-event-calendar, пробрасываем в родителя:
<cal-panel @testqw="$emit('testqw', $event)"> </cal-panel>

3. Используем глобальную шину событий
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы