所谓隔代通信就是A 与C的通信
A -> B -> C
<template>
<div id="app">
<!-- 此处监听了事件，可以在C组件中直接触发 -->
<b-child
nameToB="nameToB"
nameToC="nameToC"
@buttonClick="buttonClick"
>
</b-child>
</div>
</template>
<script>
import BChild from "./B.vue";
export default {
data() {
return {};
},
components: { BChild },
methods: {
buttonClick() {
console.log("buttonClick...");
}
}
};
</script>B.vue
<template>
<div>
<h1>B组件</h1>
<p>name: {{nameToB}}</p>
<p>$attrs: {{$attrs}}</p>
<hr>
<!-- C组件中能直接触发buttonClick的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
<!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
<c-child v-bind="$attrs" v-on="$listeners"></c-child>
</div>
</template>
<script>
import CChild from './C.vue';
export default {
props: ['nameToB'],
components: { CChild },
data () {
return {};
},
// inheritAttrs: false,
};
</script>C.vue
<template>
<div>
<h1>C组件</h1>
<p>name: {{nameToC}}</p>
<p>$attrs: {{$attrs}}</p>
<button @click="buttonClick">点击C按钮</button>
</div>
</template>
<script>
export default {
// inheritAttrs: false,
props: ['nameToC'],
data () {
return {};
},
methods: {
buttonClick(){
this.$emit('buttonClick');
}
}
};
</script>最终，通过B实现了A与C的通信
参考
Vue v2.4中新增的attrs及attrs及attrs及listeners属性使用教程
