目录
vue2
第一种：基本用法（不是响应式）
// 父组件
data() {
return {
text: "张三"
}
},
provide: function() {
return {
name: this.text
}
},这种方法传递过来的数据是没有响应性的，当你改变父组件中的name时，子组件中接收的name并不会改变。
官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
第二种：响应式
1、传递的参数用一个函数返回
// 父组件
data() {
return {
text: "张三"
}
},
provide: function() {
return {
texts: () => this.text
}
}// 子组件
// html
<p>{
{ textValue }}</p>
// js
inject: ['texts'],
computed: {
textValue() {
return this.texts()
}
}父组件返回一个自定义的函数,子组件进行computed来进行处理，来实现响应式数据处理。
2、把需要传递的参数定义成一个对象
// 父组件
data() {
return {
user:{
name: "张三"
}
}
},
provide: function() {
return {
user: this.user
}
}// 子组件
// html
<p>{
{ userName }}</p>
<p>{
{ user.text }}</p>
// js
inject: ['user'],
computed: {
userName() {
return this.user.text
}
}vue3
直接使用ref 和 reactive方法，来进行响应式数据处理
// 父组件
import { reactive,provide,ref } from 'vue';
provide('page', ref('1'))
provide('user', reactive({
age: 11,
name: '张三'
}))// 子组件
import { inject } from 'vue';
const user = inject("user");
const page = inject("page");无论任何一个组件内的值发生改变，两个组件的值都会进行响应式的数据更新。
扩展：