vue.js之多层父子组件通信方式二（provide和inject）

多层父子组件通信方式二（爷爷和孙子通话）

• vue.js之多层父子组件通信方式一($attrs和$listeners)
• provide，提供给子组件要使用的数据。形式有对象和函数。
• inject，接收父组件的数据，形式有字符串数组、对象（from、default）。
• 假如有组件A CompA（爷爷）、组件B CompB（爸爸）、组件C CompC（孙子），App.vue调用组件A，组件A调用组件B，组件B调用组件C，组件A（爷爷）跨过组件B（爸爸）直接给组件C（孙子）传数据。

App.vue

<template>
  <div id="app">
    <CompA title="123" @a="handleA"></CompA>
  </div>
</template>
<script>
 import CompA from "./components/CompA";
export default {
  name: 'App',
  components: {
    CompA,
  },
  methods: {
    handleA() {
      console.log("handleA");
    }
  },
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

组件A

<template>
  <div>
    CompA
     <CompB></CompB>
  </div>
</template>
<script>
import CompB from "./CompB";
export default {
  // 爷爷要给孙子CompC传话
  // provide:{
  //     foo:"bar"
  // },
  // 配置传输函数结果 
  provide() {
    return {
      foo: "bar",
      compA: this,
    };
  },
  components: {
    CompB,
  },
  methods: {
    getTitle() {
      return "heiheihei";
    },
  },
};
</script>
<style scoped>
</style>

组件C

<template>
    <div>
        CompC
         {{foo}}
    </div>
</template>

<script>
    export default {
        //收到了爷爷CompA说的话
        // inject:["foo"],
        // 孙子接收爷爷的实例，可以访问爷爷实例中的方法
        inject:["foo","compA"],
        mounted () {
            console.log(this.compA);
            console.log(this.compA.getTitle());
        },
    }
</script>
<style lang="scss" scoped>
</style>