不管react和vue其实都会有这个问题 在react中我们可以使用 context的方式进行传递
但是今天的主角并不是 react. 博主最近使用vue进行开发。 相信初学的小伙伴 肯定会碰见多层嵌套传递的问题
其实你也可以 根据 props 一层一层传递下去。但是不是贼麻烦
vue中给我提供了。provide 和 inject的方式 进行深层组件传递。
vue2中
在上层组件中
export default {
provide: {
foo :"hello world"
}
}
// 当然有的时候 你想吧 data中的数据 传递下去 这个时候就需要你的provide 返回一个函数了
data() {
return {
foo: "hello wolrd"
}
},
provide() {
return {
foo: this.foo
}
},
在底层组件中
export default {
inject:['foo']
}
然后 就可以直接拿着 foo 和 props 一样使用
其实上面 你会发现个问题 当我们在上层组件中 修改。foo的数值的时候,但是这个 底层的组件并不会随着变化 这个其实也是正常的 因为vue的文档中也有说明的
如果你想让上层改变的时候 底层也跟着变 那么你就要关注文档的那句话后半部分了。 就是如果你传入的是一个可监听的对象 那么他的属性就是可响应的了。
这个时候我们改下就可以了。将一个对象传递下去
export default {
name: 'Home',
components: {
HelloWorld
},
data() {
return {
foo: {
name: "hello world"
}
}
},
provide() {
return {
foo: this.foo
}
},
}
然后在下层组件中
<div> {
{
foo.name }} </div>
export default {
inject:['foo']
}
这样当我们在上层组件的时候。更改foo.name 属性的时候 底层也会同步变化了
vue3中使用
怎么说呢。其实vue2中你会了 那么vue3中你也会用。首先vue3中兼容vue2中的写法哦。
所以这里我们就讲解下 组合api中的使用 就是在setup中怎么使用
在上层组件中 直接从 vue中 把provide导出即可
而且你想让他有响应的话。那么就创建一个ref 可监听对象 然后传递下去就可以了
import {
provide, ref } from "vue"
export default {
setup() {
const foo = ref("hello world")
provide("foo", foo)
setTimeout(() => {
foo.value = "我在测试"
}, 3000)
}
}
在下层组件中使用
也是结构出来 inject 然后 返回就可以直接使用了 比较简单
<template>
<div>{
{
useFoo }}</div>
</template>
<script>
import {
inject } from "vue"
export default {
setup() {
const useFoo = inject('foo')
return {
useFoo
}
}
}
</script>
总结来说 还是挺简单 技术这个东西 大多数情况下 没必要深挖 只要你熟能生巧 很多东西都是一通百通。
关注我。持续更新 前端知识。