Vue 3 提供与注入

提供与注入

通常,当我们需要将数据从父组件传递到子组件时,我们使用 props。想象一下这样的结构:你有一些深嵌套的组件,而你只需要来自深嵌套子组件中父组件的某些内容。在这种情况下,你仍然需要将 prop 传递到整个组件链中,这可能会很烦人。

对于这种情况,我们可以使用 provideinject 对。父组件可以作为其所有子组件的依赖项提供程序,而不管组件层次结构有多深。这个特性有两个部分:父组件有一个 provide 选项来提供数据,子组件有一个 inject 选项来开始使用这个数据。

Vue 3 提供与注入_第1张图片

Provide/inject scheme

例如,如果我们有这样的层次结构:

`Root
└─ TemplateM
   ├─ TestCom
`

如果我们的子组件需要调用父组件的方法,我们就可以使用 provide/inject 将父组件的 Vue 实例对象传递进去:

`

`

然后在子组件注入父组件的 parent 属性:

`

`

查看浏览效果如下:

但是,如果我们尝试在此处提供一些组件实例 property,则这将不起作用:

``provide: {
    todoLength: this.todos.length // 将会导致错误 'Cannot read property 'length' of undefined`
},
``

要访问组件实例 property,我们需要将 provide 转换为返回对象的函数,接下来我们将父组件的实例传递到子组件中,这样我们就能在子组件访问到父组件的属性了:

`

`

在子组件中使用 parent:

`

`

查看浏览效果如下:

这使我们能够更安全地继续开发该组件,而不必担心可能会更改/删除子组件所依赖的某些内容。这些组件之间的接口仍然是明确定义的,就像 prop 一样。

实际上,你可以将依赖注入看作是“long range props”,除了:

  • 父组件不需要知道哪些子组件使用它提供的 property
  • 子组件不需要知道 inject property 来自哪里

你可能感兴趣的