跨组件通讯：$attrs和$listener的用法？

跨组件通讯：

如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。
用挺俗一点的话来讲呢，假如B组件是父亲，那么A组件就是爷爷，c,d组件就是孙子，那么爷爷和孙子之间是如何进行传值的呢？（只是一个比较形象得说法，利于理解）

• $attrs：主要用于接收没有通过props传递的属性，可以通过 $attrs将爷爷组件的值传递给中间组件（B组件）的子组件（C组件）

A.vue=>

<template>
  <div>
    //传值
    <B:tit="title" :name="name"></B>
  </div>
</template>
<script>
import B from "@/components/B";
export default {
  name: "A",
  components: { B},
  data() {
    return {
      title: "我的我的",
      number: 1000,
      name: "苹果手机"
    };
   },
  }
};
</script>

B.vue=>

<template>
    <div>
       // 父亲接受爷爷传过来的值    【所隔得组件  （父亲组件）】
        B组件----{{$attrs.tit}}------{{$attrs.name}}
        // 爷爷传递孙子值
        <C v-bind="$attrs"></C>
    </div>
</template>
<script>
import C from "@/components/C"
export default {
    name:"B",
    components:{C},
    // props:{
    //     tit:{
    //         default:'标题',
    //         type:String
    //     }
    // }
    // 解释：$attrs只可以接受props接受以外的值
}
</script>

C.vue=>

<template>
  <div>
    C----{{$attrs.tit}}----{{$attrs}}  //接受爷爷传递的值
  </div>
</template>
<script>
export default {
  name: "C",
  data() {
    return {};
  },
};
</script>

• $listener：主要用于由子组件向爷爷组件传递事件
  A.vue

<template>
  <div>
    //传值
    <B @go="get"></B>
  </div>
</template>
<script>
import B from "@/components/B";
export default {
  name: "A",
  components: { B},
  methods: {
   get(v) {
      // 爷爷接受
      console.log("孙子传的数据:", v);
    }
   }
  }
};
</script>

B.vue=>

<template>
    <div>
      // 所隔得组件  （父亲组件）
      <C v-on="$listeners"></C>
    </div>
</template>
<script>
import C from "@/components/C"
export default {
    name:"B",
    components:{C},
}
</script>

C.vue=>

<template>
  <div>
     <button @click="go()">孙子派发</button>
  </div>
</template>
<script>
export default {
  name: "C",
  data() {
    return {};
  },
  methods: {
    go() {
    // 孙子传递给爷爷值
      this.$emit("go", "孙子传递的值");
    }
  }
};
</script>