Vue3 provide/inject

2,270 阅读1分钟

1. options Api

image.png

  • 通常我们从父组件传值给子组件使用的是props,如果我们需要深层的传递如从父组件传递给孙子组件,那么再使用props去传递,这种做法可能会使你发怒。

image.png

  • 遇到这种情况,就可以使用provide和inject,它可以在父级提供,在所有的子组件都可以拿到,不管嵌套得有多深。那么父组件可以使用provide选项,子组件使用inject选项。

image.png

image.png

  • 使用示例

image.png

+然而,它不能传递组件实例上的属性,不能传递如this.name

image.png

image.png

  • 可以转换为提供一个函数去进行替代,类似于data,目的是进行一个隔离,防止在调用的时候把提供方的数据进行了修改。

不是响应式的

image.png

  • 通过provide传入的数据不是响应式的,如果修改了提供方的数据,在使用方是不会改变的,可以使用computed去计算传入的数据。

2. composition Api

image.png

  • 分开定义,两个参数,一个名,一个值

image.png

  • 注入的时候,可以提供一个默认值。

image.png

  • 添加响应式

image.png

  • 建议不要在inject中去更改数据,在provide修改。你也可以使用readonly禁止修改

image.png