详细讲解vue2组件通信(四)——多代传递provide/inject

学一个知识点，我们得知道这个知识点是用来干嘛的？为什么选择用它？怎么用？

provide/inject的作用

vue官网原话【允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，
并在其上下游关系成立的时间里始终生效。】也就是如果当前组件设置了provide传递数据，
那么在当前组件的所有后辈组件中，都可以使用inject接收这个数据。

provide/inject被选择的理由

组件通信的方式那么多，多代传递数据的通信方式还有vuex，$root，全局事件总线。为什
么选择provide/inject呢？
1. 如果当前项目只是一个小项目，项目中用不到太多的多代组件通信，那引入vuex就使得
项目的体积变大。
2. 使用全局事件总线或者$root，多人协同开发时，标识容易起冲突。

provide/inject使用方式

provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }
provide：应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 数据。在
该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 
和 Reflect.ownKeys 的环境下可工作。
inejct：可以是字符串数组或者一个对象。接收到的值会被vue直接添加到当前组件实例对
象身上。

App.vue

<template>
  <div>
    <Son></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue";
export default {
  name: "App",
  components: {
    Son,
  },
  // provide: {
  //   obj: { a: 1, b: 2 },
  // },
  provide() {
    // 通过this可以拿到当前组件，可以在此做一些业务
    console.log(this);
    return {
      obj: { a: 1, b: 2 },
    };
  },
};
</script>

<style>
</style>

Son.vue

<template>
  <div>Son
    <GrandSon></GrandSon>
  </div>
</template>

<script>
import GrandSon from "./GrandSon.vue"
export default {
  name: "web-son",
  components: {
    GrandSon
  }
};
</script>

<style scoped>
</style>

GrandSon.vue

<template>
  <div>grandson</div>
</template>

<script>
export default {
  name: "web-grandson",
  // inject: ["obj"],
  inject: {
    // 起别名
    grandSonObj: "obj",
  },
  mounted() {
    console.log(this);
    // console.log(this.obj);
    console.log(this.grandSonObj);
  },
};
</script>

<style scoped>
</style>

注意事项

非响应式的

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一
个可监听的对象，那么其对象的属性还是可响应的。意味着vue底层没有打破引用数据类
型的引用关系，修改引用数据类型的属性可以实现响应式。
在vue3版本中，已经变成响应式的了。

Vue 2.2.1版本之后变化的特性

Vue 2.2.1版本之前，inject接收的值会在 props 和 data 初始化之后加载。但是在
Vue 2.2.1版本之后，inject接收的值会在props和data初始化之前了，那么我们可以
在data和props中拿到我们inject接收的值啦！

初始化data

const Child = {
  inject: ['foo'],
  data () {
    return {
      bar: this.foo
    }
  }
}

为props设置默认值

const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default () {
        return this.foo
      }
    }
  }
}

Vue 2.5.0版本之后添加的特性

可以为inject设置默认值啦。当inject在祖先的provide中找不到该属性时，当给予了默认
值，便不再报错了。此时inject的值为默认值

const Child = {
  inject: {
  	/* 去接收祖辈provide中的foo数据，并在当前组件身上添加一个foo属性,
  	 如果没有在祖辈中找到foo数据，那么当前组件身上foo属性的属性值为"foo" */    
  	 foo: { default: 'foo' }
  }
}

const Child = {
  inject: {
  /* 去接收祖辈provide中的bar数据，并在当前组件身上添加一个foo属性,
  	 如果没有在祖辈中找到foo数据，那么当前组件身上foo属性的属性值为"foo" */
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

const Child = {
  inject: {
  /* 去接收祖辈provide中的bar数据，并在当前组件身上添加一个foo属性,
  	 如果没有在祖辈中找到foo数据，那么当前组件身上foo属性的属性值为[1, 2, 3] */
   foo: {
      from: 'bar',
      default: () => {
          // 注意this指向为undefined
          console.log(this);
          return [1, 2, 3]
      }
    }
  }
}

当前组件的祖辈有多个provide

依然是可以正常全部接收的，关键是provide中的属性名不要冲突。如果冲突的话就会
inject接收到离当前组件关系最近的祖辈provide中的值。

App.vue

<template>
  <div>
    <Son></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue";
export default {
  name: "App",
  components: {
    Son,
  },
  // provide: {
  //   obj: { a: 1, b: 2 },
  // },
  provide() {
    // 通过this可以拿到当前组件，可以在此做一些业务
    console.log(this);
    return {
      obj: { a: 1, b: 2 },
    };
  },
};
</script>

<style>
</style>

Son.vue

<template>
  <div>
    Son
    <GrandSon></GrandSon>
  </div>
</template>

<script>
import GrandSon from "./GrandSon.vue";
export default {
  name: "web-son",
  components: {
    GrandSon,
  },
  provide: {
    obj: { c: 3, d: 4 },
  },
};
</script>

<style scoped>
</style>

GrandSon.vue

<template>
  <div>grandson</div>
</template>

<script>
export default {
  name: "web-grandson",
  // inject: ["obj"],
  inject: {
    // 起别名
    grandSonObj: "obj",
  },
  mounted() {
    console.log(this);
    // console.log(this.obj);
    console.log(this.grandSonObj);
  },
};
</script>

<style scoped>
</style>

当属性值没有重复时，可以正常接收。

App.vue

<template>
  <div>
    <Son></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue";
export default {
  name: "App",
  components: {
    Son,
  },
  // provide: {
  //   obj: { a: 1, b: 2 },
  // },
  provide() {
    // 通过this可以拿到当前组件，可以在此做一些业务
    console.log(this);
    return {
      obj: { a: 1, b: 2 },
    };
  },
};
</script>

<style>
</style>

Son.vue

<template>
  <div>
    Son
    <GrandSon></GrandSon>
  </div>
</template>

<script>
import GrandSon from "./GrandSon.vue";
export default {
  name: "web-son",
  components: {
    GrandSon,
  },
  provide: {
    obj2: { c: 3, d: 4 },
  },
};
</script>

<style scoped>
</style>

GrandSon.vue

<template>
  <div>grandson</div>
</template>

<script>
export default {
  name: "web-grandson",
  // inject: ["obj"],
  inject: {
    // 起别名
    grandSonObj: "obj",
    obj2: "obj2",
  },
  mounted() {
    console.log(this);
    // console.log(this.obj);
    console.log(this.grandSonObj);
    console.log(this.obj2);
  },
};
</script>

<style scoped>
</style>