爷爷、孙子组件间值的传递（Vue2.4中$attrs和$listeners用法）

<template>
   <div>
     <child-dom
      :foo="foo"
      :coo="coo"
      :goo=‘goo‘
      v-on:upRocket="reciveRocket"
     >
     </child-dom>
   </div>
</template>
<script>
   import childDom from "./child.vue";
   export default {
     data() {
        return {
          foo:"Hello, world",
          coo:"Hello,rui",
          goo:‘googoo‘
        }
     },
    components:{childDom},
    methods:{
    reciveRocket(e){
        console.log(‘爷爷组件传来的值‘,e)
        console.log("reciveRocket success")
    }
 }
   }
</script>

<template>
   <div>
      <p>foo:{{foo}}</p>
      <p>attrs:{{$attrs}}</p>
       <grandson v-bind="$attrs" v-on="$listeners"></grandson>
   </div>
</template>
<script>
import grandson from ‘./grandson‘;
export default {
 name:‘child-dom‘,
 props:[
   "foo",      //父组件不能接收，否则在孙子组件中获取不到值
  ],
//  inheritAttrs:false,
 components:{grandson},
}
</script>

<template>
  <div>
   <p>coo:{{coo}}</p>
   <p>{{goo}}</p>
   <button @click="startUpRocket">我要发射火箭</button>
  </div>
</template>
<script>
  export default {
    name:‘grandson‘,
    props:["coo","goo"],
    // inheritAttrs:false,
    methods:{
      startUpRocket(){
        this.$emit("upRocket",‘传值到爷爷组件‘);
        // console.log("startUpRocket")
      }
    }
  }
</script>