vue2中provide/inject的使用和响应式

一、基本用法

在父组件中使用provide传值，在子组件中用inject接收。

// 父组件
data() {
  return {
     name: "卷儿"
  }
},
provide() {
  return {
    name: this.name
  }
},

// 子组件
inject: ['name'],

这种方法传递过来的数据是没有响应性的，当你改变父组件中的name时，子组件中接收的name并不会改变。
官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

二、响应式

1.方法一：传递的参数用一个方法返回

// 父组件
data() {
    return {
      name: "卷儿"
    }
},
provide() {
    return {
      newName: () => this.name
    }
}

// 子组件
inject: ['newName'],
// 或者这样
inject: {
	newName: {
    	from: "newName",
        default: () => () => false  // default 需要这样写。
        // 在父级没有provide 的话，写成 default: () => false 的话 
        // 会自动执行该函数，就变成了 this.newName === false  
        // 这样再 this.newName() 就会报错
    }
}
computed: {
   hnewName() {
     return this.newName()
   }
 }

<!-- 子组件中的使用方式 -->
<h2>{{ hnewName }}</h2> <!-- 推荐使用这种方法 -->
<h2>{{ newName() }}</h2>

2.方法二：把需要传递的参数定义成一个对象

官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

// 父组件
data() {
    return {
      obj: {
        name: "卷儿"
      }
    }
},
provide() {
    return {
    // 传递一个对象
      obj: this.obj
    }
},

// 子组件
inject: ['obj'],
computed: {
	// 也可以不用计算属性重新定义
   objName() {
     return this.obj.name
   }
 }

<!-- 子组件中的使用方法 -->
<h2>obj的name： {{objName}}</h2>
<h2>obj的name： {{obj.name}}</h2>