Компонент Vue JS прослушивает компонент внука для события

Question

В документах Vue есть примечания (https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events), но будет ли это применяться и к внукам?

grandchild.vue

   <select class="form-control" v-model="selected" @change="updateValue()" >
     ...
    </select>
  methods: {
    updateValue: function () {
      this.$emit('refreshModel', this.selected)
      this.$emit('input', this.selected)
      console.log('selected ' + this.selected + ' in ' + this.$props.field)
    }
  }

Grandparent.vue

<parent-form ...
              v-on:refresh-model="refreshModel"
             ...
</parent-form>

methods: {
  refreshModel: function (event) {
    console.log("Hello Vue JS");
  },

Очевидно, что я удалил большую часть кода и, надеюсь, просто оставил основы.

Результатом выполнения этого является то, что в логе отображается оператор log, но не функция refreshModel.

Кто-нибудь может увидеть, что я делаю не так?

С уважением

Answer 1

Вам необходимо «последовательно соединить» события, поэтому вам нужно будет поместить слушателя в родительскую форму, которая повторно отправляет событие бабушке и дедушке.

Child (emit) -> Parent(listen, emit) -> Grandparent (listen)

Vuex обходит эту проблему, используя «состояние» в качестве единственного источника правды, поэтому необходимо обновить только «состояние», чтобы отразить изменения ввсе подключенные компоненты.

https://vuex.vuejs.org/