Vuejs2 Vue JS组件侦听孙子组件的事件

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)
    }
  }

...
方法：{
updateValue:函数（）{
此.$emit（'refreshModel'，此.selected）
this.$emit（'input'，this.selected）
console.log（'selected'+this.selected+'in'+this.$props.field）
}
}

祖父母

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

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

---

您需要“菊花链”事件，因此您必须将侦听器放在父窗体中，以便将事件重新发送给祖父母

孩子（发射）->父母（听，发射）->祖父母（听）

Vuex通过使用“状态”作为唯一真相来源来解决此问题，因此只需更新“状态”以反映所有连接组件中的更改

从Vue 2.4开始，有一种非常简单的方法：

孙子像以前一样发出信号


在中间一代中，只需添加
v-on=“$listeners”
，即可将信号向上游中继到自己的父代。例如：




在祖父母（最终信号目的地）中，像以前一样捕捉信号


有关详细信息，请包括可以运行的代码段，请参阅

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