返回

vue中provide和inject的使用技巧

Created By ZOU on Jul 17 2019

在使用vue开发项目的过程中,那么就离不开组件,组件传值也是其中一个重要的操作,通常的传值方法是通过props进行传值,例如:

<TempCompontent :foo="bar" /> // 传递属性foo值为bar

但是当我们子孙级的传值的时候,使用props难免会有些麻烦,层数也比较多。

vue官方提供了一个方法,通过provide和inject可以实现子孙级的传值,例如:

// 父组件提供
const Parent = {
provide: {
foo: 'bar'
}
}
// 子孙组件提供
const Child = {
inject: {
foo: {
from: 'foo'
}
},
created() {
console.log(this.foo) // 打印出bar
}
}

这样就可以获取到父级传的值,但是这个值并不是响应的,也就是说如果我在父组件修改了这个值,子孙组件是不会进行更新的。

但是如果我传递一个可监听的对象,修改对象的值,子组件的值就会触发更新了,例如:

// 父组件提供
const Parent = {
provide: {
parent: this
},
data() {
return {
foo: 'bar'
}
}
}
// 子孙组件提供
const Child = {
inject: {
parent: {
from: 'parent'
}
},
created() {
console.log(this.parent.foo) // 打印出bar
}
}

这样当我在父组件修改foo的值,子组件的foo也就更新了。

标签: javascript vue