vue中多层嵌套传递props,vue中provide/inject讲解(含vue2, vue3)

不管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>

总结来说 还是挺简单 技术这个东西 大多数情况下 没必要深挖 只要你熟能生巧 很多东西都是一通百通。

关注我。持续更新 前端知识。