vuejs2 - Vue JS 组件监听孙组件的事件

Question

Vue 文档 ( https://v2.vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events ) 中有注释，但这也适用于孙子吗？

孙子.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)
    }
  }

祖 parent .vue

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

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

显然我已经删除了很多代码，希望只留下了要点。

运行结果是显示了孙子中的日志语句，但不显示refreshModel函数。

有人能看出我做错了什么吗？

问候

Answer 1

从 Vue 2.4 开始，有一个非常简单的方法:

1. 孙子像以前一样发出信号。

2. 在中间代中，只需添加 v-on="$listeners" 即可将信号上游转发到其自己的父代。示例:

   <!-- Relays the signal from its child component to its own parent -->
   <vue-grandchild-component v-on="$listeners">  
   </vue-grandchild-component>
   

3. 在祖 parent (最终信号目的地)中，像以前一样捕获信号。

有关更多详细信息，请包含您可以运行的代码片段，请参阅 this thread