要实现的组件数据传递如下：

1645425326(1).png

数据交互实现

1.当然可以使用prop $emit 一级一级的往下传递，这种方式不多讲了

2.使用$attrs/$listeners 来传递

A组简代码实现：

<template>
 <div>
   <childB 
    :foo="foo"
    :coo="coo"
     v-on:upRocket="reciveRocket"
   >
   </childB >
 </div>
</template>
<script>
 import childB from "@/components/ChildB.vue";
 export default {
   name:'demoNo',
   data() {
     return {
       foo:"Hello, world",
        coo:"Hello,child"
    }
  },
 components:{childDom},
 methods:{
   reciveRocket(){
      console.log("reciveRocket success")
   }
 }
}

</script>

B 组件代码如下

<template>
 <div>
 <p>foo:{{foo}}</p>
 <p>attrs:{{$attrs}}</p>
 <childC v-bind="$attrs" v-on="$listeners"></childC>
 </div>
</template>
<script>
import childC from './childC';
export default {
 name:'childB '
 props:["foo"],
 inheritAttrs:false,
}
</script>

C 组件代码如下：

<template> 
 <div>
 <p>coo:{{coo}}</p>
 <button @click="startUpRocket">我要发射火箭</button>
 </div>
</template>
<script>
 export default {
 name:'childC',
 props:['coo'],
 methods:{
   startUpRocket(){
   this.$emit("upRocket");
   console.log("startUpRocket")
   }
 }
 }
</script>