多层嵌套中的vue组件调用祖先组件的方法

组件之间多层传递属性是一个比较常见的业务场景。如：
A --> B --> C --> D
要实现 B,C、D都可以调用A中的方法

A组件

<template lang="pug">
<div style="border:1px solid #ccc;padding:10px">
<h2>组件A 数据项:{{myData}}</h2>

<B @changeMyData="changeMyData" ></B>
</div>
</template>
<script>
import B from "./B";
export default {
data() {
return {
myData: "100"
};
},
components: { B },
methods: {
changeMyData(val) {
this.myData = val;
}
}
};
</script>

B组件

<template>
<div style="border:1px solid #ccc;padding:10px">
<h3>组件B</h3>

<C v-bind="listeners"></C>
</div>
</template>
<script>
import C from "./C";
export default {
components: { C },
};
</script>

C组件

<template>
<div style="border:1px solid #ccc;padding:10px">
<h4>组件C</h4>

<D v-bind="listeners"></D>
</div>
</template>
<script>
import D from "./D";
export default {
components: { D }
};
</script>

D组件

<template>
<div style="border:1px solid #ccc;padding:10px">
<h5>组件D</h5>
<input v-model="myd" @input="hInput" />
<p>attr['myData'] 则娶不到了
created() {
this.myd = this.myData; // 在组件A中传递过来的属性
console.info(this.listeners);
},
methods: {
hInput() {
this.$emit("changeMyData", this.myd); // // 调用组件A中传递过来的事件
}
}
};
</script>

在b c d中均可以使用 this.$emit("changeMyData", this.myd);来触发A中的方法changeMyData