vue的provide与inject如何使用？能否实现双向绑定？

vue 组件间的通信方式有很多种，所以使用时需要考虑哪种方式是最合适的。若仅仅是简单的隔代组件通信，我认为使用 provide与inject会更加方便。

1. provide与inject用法

作用：实现组件间的通信
适用范围：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。
使用方式：

provide 选项应该是：一个对象或返回一个对象的函数
inject 选项应该是：一个字符串数组，或 一个对象，对象的 [key] 是本地的绑定名

2.使用示例

示例为 Father.vue > Son.vue > GrandSon.vue 三层嵌套结构

Father.vue
父组件进行变量提供，供后代组件使用

<template>
  <div>
    <div>
      <h1>这里是父组件</h1>
      <button @click="changeName">click me</button>
      <Son />
    </div>
  </div>
</template>
<script>
import Son from "./Son";
export default {
  name: "Father",
  components: {
    Son
  },
  // 提供变量，供后代组件使用
  provide() {
    return {
      // 普通提供变量，不会发生响应式变化
      name: this.name,
      // 响应式提供
      getReactiveName: () => this.name
    };
  },
  data() {
    return {
      name: "默认姓名：张三"
    };
  },
  methods: {
    changeName(val) {
      // 修改需要注入的变量
      this.name = "父组件修改后的姓名： 杰森斯坦森·郭达";
    }
  }
};
</script>

Son.vue
此处并无实际意义，仅为了增加组件嵌套层级

<template>
  <div>
    <h4>这里是儿子组件</h4>
    <GS />
  </div>
</template>
<script>
import GS from "@/views/GrandSon.vue";
export default {
  name: "Son",
  components: {
    GS
  }
};
</script>

GrandSon.vue
此为孙组件，进行注入父组件提供的数据

<template>
  <div>
    <h6>
      这里是孙子组件
      <br />
      <br />
      <!-- 普通的使用提供的值 -->
      正常使用:{{name}}
      <br />
      <br />
      <!-- 响应式使用方式1: 直接执行提供的函数-->
      直接执行提供的响应函数: {{getReactiveName()}}
      <br />
      <br />
      <!-- 响应式使用方式2: 使用computed计算属性-->
      使用computed计算属性: {{reactiveNameFromParent}}
    </h6>
  </div>
</template>
<script>
export default {
  name: "GrandSon",
  inject: ["name", "getReactiveName"],
  computed: {
    reactiveNameFromParent() {
      return this.getReactiveName();
    }
  }
};
</script>

点击父组件里的按钮，可以发现父组件内的变量发生了变化，而后代组件内也可以响应式发生变化。

3.provide与inject实现双向绑定

Father.vue
父组件注入的地方多提供一个修改的方法

// ...
  provide() {
    return {
      // 普通注入变量，不会发生响应式变化
      name: this.name,
      // 响应式注入
      getReactiveName: () => this.name,
      // 给后代提供修改变量的方法
      setName: ({ name }) => {
        this.name = name;
      }
    };
  },
// ...

Grandson.vue
孙组件

// ...  多接受一个提供的方法
  inject: ["name", "getReactiveName",'setName'],
// ...
methods: {
    changeName() {
    // 调用父组件提供的方法进行修改
      this.setName({name:'孙组件修改后的姓名： 尼古拉斯·赵四'});
    }
  }

思路：
父组件多提供一个修改父组件内变量的方法，后代组件使用该方法并传递相应参数，父组件变量修改完成后会，后代组件相应的地方会响应式的进行修改。

如此即可实现双向绑定。