可以看到，在 A.vue 里，我们设置了一个 provide: name，值为 浪里行舟，它的作用就是将 name 这个变量提供应它的一切子组件。而在 B.vue 中，经过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接经过 this.name 拜访这个变量了，它的值也是 浪里行舟。这就是 provide / inject API 最中心的用法。
需求留意的是：provide 和 inject 绑定并不是可照应的。这是刻意为之的。但是，假设你传入了一个可监听的对象，那么其对象的属性还是可照应的----vue官方文档
所以，下面 A.vue 的 name 假设改动了，B.vue 的 this.name 是不会改动的，依然是 浪里行舟。
3.provide与inject 怎样完成数据照应式
普通来说，有两种办法：
provide祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在子孙组件中直接修正祖先组件的实例的属性，不过这种办法有个缺陷就是这个实例上挂载很多没有必要的东西比如props，methods
运用2.6最新API Vue.observable 优化照应式 provide(引荐)
我们来看个例子：孙组件D、E和F获取A组件传递过去的color值，并能完成数据照应式变化，即A组件的color变化后，组件D、E、F不会跟着变(中心代码如下：)
// A 组件
<div>
<h1>A 组件</h1>
<button @click="() => changeColor()">改动color</button>
<ChildrenB />
<ChildrenC />
</div>
......
data() {
return {
color: "blue"
};
},
// provide() {
// return {
// theme: {
// color: this.color //这种方式绑定的数据并不是可照应的
// } // 即A组件的color变化后，组件D、E、F不会跟着变
// };
// },
provide() {
return {
theme: this//办法一：提供祖先组件的实例
};
},
methods: {
changeColor(color) {
if (color) {
this.color = color;
} else {
this.color = this.color === "blue" ? "red" : "blue";
}
}
}
// 办法二:运用2.6最新API Vue.observable 优化照应式 provide
// provide() {
// this.theme = Vue.observable({
// color: "blue"
// });
// return {
// theme: this.theme
// };
// },
// methods: {
// changeColor(color) {
// if (color) {
// this.theme.color = color;
// } else {
(责任编辑：admin)