所谓隔代通信就是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属性使用教程