目录
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");
无论任何一个组件内的值发生改变,两个组件的值都会进行响应式的数据更新。
扩展: