爷孙传值

爷传孙 provide、inject

爷

  export default {
    provide() {
      return {
        injectData: "kjf"
      };
    },
    data() {}
   }

孙

<template>
 {{injectData}}
</template>
  export default {
    inject: ["injectData"],
    data() {}
   }

这种方式是可以向自己所有子组件传值；

爷传孙 attrs

爷

  <fu :kjf="msg"></fu>
  export default {
     data() {
      return {
        msg: "123"
      }
    },
   }

父

  <sun v-bind="$attrs" v-on="$attrs"></sun> 
  //相对于把数据传递一下

孙

<template>
 {{kjf}}
</template>
  export default {
    inheritAttrs: false, //当一个组件设置了inheritAttrs: false后（默认为true），那么该组件的非props属性(即未被props接收的属性)将不会在**组件根节点上生成html属性**
    props: {
      kjf: {
        type: String
      }
    },
   }

孙传爷 listeners

爷

  <fu @fromSun="fromSun"></fu>
  export default {
     methods: {
      fromSun(info){
        console.log(info);
      }
    },
   }

父

  <sun v-on="$listeners"></sun> 
  //相对于把事件传递一下

孙

  export default {
    contextmenuC() {
        this.$emit("fromSun", this.info);
      }
   }