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:'孙组件修改后的姓名： 尼古拉斯·赵四'});}}