$ emit не вызывает дочерние события

Для проекта VueJS 2.0 у родительского компонента

есть следующее:

<template>
<child></child>
<button @click="$emit('childEvent)"></button>
</template>

на дочернем компоненте я:

{
  events: { 'childEvent' : function(){.... },
  ready() { this.$on('childEvent',...) },
  methods: { childEvent() {....} }
}

Ничего не работает при нажатии кнопки. Нужно ли мне создавать родительский метод, который затем выдавал бы ребенку? Я использовал vuejs 1. но теперь я смущен относительно способов работы с родителями для детей

Ответы

Ответ 1

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

Я собираюсь добавить это для тех, кто ищет ответ на этот вопрос, которому нужен способ, отличный от реквизита. Я столкнулся с аналогичной проблемой при попытке установить фокус на конкретном входе внутри настраиваемого компонента формы. Чтобы сделать это, я должен был предоставить пользовательский компонент ref, затем сделать это.

this.$refs.customInput.$emit('focus');
//or
this.$refs.customInput.directlyCallMethod();

Это обращение к экземпляру vue дочернего элемента, а затем вы можете испустить событие, которое будет слышно этим компонентом.

Ответ 2

Как par документация:

В Vue.js отношение родительский и дочерний компонент можно суммировать как реквизиты вниз, события вверх. Родитель передает данные вниз ребенку через реквизит, а потом отправляет сообщения родителям через события. Давайте посмотрим, как они будут работать дальше.

Итак, в последнем Vue вы не можете отправлять события от родителя к дочернему, вы можете передавать реквизиты для дочернего элемента и отправлять событие от дочернего к родительскому.

Ответ 3

Для этого вы можете использовать пользовательский экземпляр Vue.

// Globally
const eventBus = new Vue()

// In your child
eventBus.$on('eventName', () => {
    // Do something
});

// In your parent
eventBus.$emit('eventName')

Ответ 4

События от родителя к дочернему выполняются с помощью $broadcast() в Vue 1.0 и вообще не возможны в Vue 2.0.

И вам, возможно, это не нужно, обычно это лучшее решение, не требующее событий, но это зависит от вашего использования.

Ответ 5

Мне нужно было сделать это для поповера, где могло бы существовать несколько, а реквизиты для каждого неуместны.

Для отправки глобальных событий можно добавить прослушиватели событий в экземпляр $ root Vue.

// Child:
    created() {
      this.$root.$on('popover', (e) => {
        // Determine if popover should close, etc.
        this.close()
      })
    },
    
// Parent: 
  this.$emit('popover', 'arg1', 'argn')