Как в Vue js слушать события дочернего компонента?

Привет.

Подскажите, пожалуйста как прослушать события дочернего компонента и менять данные в родительском в зависимости от полученного значения?

В родительском компоненте есть переменная isShow: false
В дочернем компоненте нужно прослушать изменения в переменной parentIsShow и присвоить его для родительской переменной если были изменения.
  • Вопрос задан
  • 2892 просмотра
Решения вопроса 1
dicem
@dicem
Приведу пример. Например у тебя есть родитель-компонент: Page.vue в нем есть кнопка которая открывает модальное окно Modal.vue.
Page.vue:
<button @click="isShow = !isShow">Open Modal</ button>

<Modal v-if="isShow" @closeModal="isShow = !isShow"/>

При клике мы открываем модальное окошечко.
Тем временем внутри самого компонента нам надо уметь закрывать его, в таком случае пишем в дочернем компоненте Modal.vue:
...
<button @click="$emit('closeModal')">Close Modal</button>
...


Для передачи данных используйте $emit следующим образом:
$emit('closeModal', {
  data: 'value',
  data2: 'value2'
})


Подробнее можно почитать тут: https://medium.com/@modex13/vue-js-2-передача-данн...

Тут более простенько написано: https://monsterlessons.com/project/lessons/peredae...

Также можно воспользоваться следующим (но помните что это крайний случай, который не рекомендован к использованию): https://ru.vuejs.org/v2/guide/components-edge-case...
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@djon_pulse Автор вопроса
Благодарю за комментарии, они натолкнули на верную мысль.

В родительском компоненте в вызове дочернего компонента указал
<child-component ref="childComponent" @emitChildComponent="function()"><child-component>


methods: {
   // Изменить переменную в родительском компоненте на значение переменной в дочернем компоненте
   function() {
       this.isShow = this.$refs.childComponent.parentIsShow;
   }
}


В дочернем компоненте:
methods: {
   clickButtonInChildComponent() {
       this.parentIsShow = terue;
       this.$emit('emitChildComponent', this.parentIsShow);
   }
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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