组件中Provide和Inject使用

组件之间传参有多种方式，第一种是父子组件之间传参，我们可以通过props和$emit来实现。在vue中我们可以使用bus.$on (传参) bus.$emit (接受值) bus.$off(销毁)进行组件间的通信。如果组件嵌套了很多层，我们就可以使用Provide和Inject来进行组件中的传参。

Provide/Inject用于 非父子组件之间共享数据 ：

比如有 一些深度嵌套的组件 ， 子组件想要获取父组件的部分内容。 在这种情况下，如果我们仍然 将props沿着组件链逐级传递 下去，就会非常的麻烦。对于这种情况下，我们可以使用 Provide 和 Inject ：

           无论层级结构有多深，父组件都可以作为其所有子组件的 依赖提供者 ；

           父组件有一个 provide 选项 来提供数据；

           子组件有一 个 inject 选项 来开始使用这些数据；

实际上，你可以将依赖注入看作是“ long range props” ，除了：父组件不需要知道哪些子组件使用它 provide 的 property ，子组件不需要知道 inject 的 property 来自哪里。

实现代码如下：

 

App.vue: 

<template>
  <div>
    <home></home>
    <button @click="addName">+name</button>
  </div>
</template>

<script>
  import Home from './Home.vue';
  import { computed } from 'vue';

  export default {
    components: {
      Home
    },
    // provide提供数据
    provide() {
      return {
        name: "why",
        age: 18,
        length: computed(() => this.names.length) // ref对象 .value
      }
    },
    data() {
      return {
        names: ["abc", "cba", "nba"]
      }
    },
    methods: {
      addName() {
        this.names.push("why");
        console.log(this.names);
      }
    }
  }
</script>

Home.vue

<template>
  <div>
    <home-content></home-content>
  </div>
</template>

<script>
  import HomeContent from './HomeContent.vue';

  export default {
    components: {
      HomeContent
    }
  }
</script>

HomeContent.vue:

<template>
  <div>
    HomeContent: {{name}} - {{age}} - {{length.value}}
  </div>
</template>

<script>
  export default {
    // 使用inject对我们要使用的对象进行注入
    inject: ["name", "age", "length"],
  }
</script>