Vue中的provide/inject

使用场景

解决跨层级传递属性的不方便而设立的

  // 不能使用 this，使用的时候：color
  provide: {
    color: "blue",
  },
  // this.color 非响应式，使用的时候：color
  provide() {
    return {
      color: this.color,
    };
  },
  
  // 响应式一：传递一个函数，使用的时候： color()
  provide() {
    return {
      color: () => this.color,
    };
  },
  inject: ["color"],
  <template>
    <div">传下来的颜色{{color()}}</div>
  </template>
  
  // 响应式二：传递父组件实例，使用的时候：color.color
  provide() {
    return {
      color: this,
    };
  },
  inject: ["color"],
  <template>
    <div>传下来的颜色{{color.color}}</div>
  </template>

provide链

若孙子组件中有同名的data，将会覆盖祖先传递的
一句话解释provide/inject机制的原理——向上找寻。