组合式提供与注入
在之前的章节,我们讲了选项式的 提供与注入,今天我们继续讲组合式提供与注入。
我们也可以在组合式 API 中使用 provide/inject。两者都只能在当前活动实例的 setup()
期间调用。
设想场景
假设我们要重写以下代码,其中包含一个 TemplateM
组件,该组件使用组合式 API 为 MyMarker
组件提供用户的位置。
<MyMarker />
</template>
关于 MyMaker.vue 的代码如下:
<div>
{{location}} - {{geolocation}}div>
</template><script>export default {inject: ['location', 'geolocation']
}script>
我们可以看到效果如下:
上面我们使用的选项式的提供与注入,接下来我们就来使用组合式 API 来改造上面的代码。
组合式 provide
在 setup()
中使用 provide
时,我们首先从 vue
显式导入 provide
方法。这使我们能够调用 provide
时来定义每个 property。
provide
函数允许你通过两个参数定义 property:
- property 的 name (
类型)
- property 的 value
使用 TemplateM
组件,我们提供的值可以按如下方式重构:
<MyMarker />
</template>
我们发现就是将 provide
对象改造成 provide(key, value)
函数的形式。
组合式 inject
在 setup()
中使用 inject
时,还需要从 vue
显式导入它。一旦我们这样做了,我们就可以调用它来定义如何将它暴露给我们的组件。
inject
函数有两个参数:
- 要注入的 property 的名称
- 一个默认的值 (可选)
使用 MyMarker
组件,可以使用以下代码对其进行重构:
<div>{{ location }} - {{ geolocation }}div>
</template><script>import { inject } from 'vue'export default {name: 'MyMarker',
setup() {const location = inject('location')const geolocation = inject('geolocation')return {
location,
geolocation
}
}
}script>
我们再次看看效果如下:
响应式
添加响应式
为了增加提供值和注入值之间的响应性,我们可以在提供值时使用 ref 或 reactive。
使用 TemplateM
组件,我们的代码可以更新如下:
<MyMarker />
</template>
现在,如果这两个 property 中有任何更改,MyMarker
组件也将自动更新!
修改响应式 property
当使用响应式提供/注入值时,建议尽可能,在*提供者*内保持响应式 property 的任何更改。
例如,在需要更改用户位置的情况下,我们最好在 TemplateM
组件中执行此操作。
<MyMarker />
</template>
然而,有时我们需要在注入数据的组件内部更新注入的数据。在这种情况下,我们建议提供一个方法来负责改变响应式 property。
<MyMarker />
</template>
<div>{{ location }} - {{ geolocation }}div>
</template><script>import { inject } from 'vue'export default {name: 'MyMarker',
setup() {const location = inject('location')const geolocation = inject('geolocation')const updateLocation = inject('updateLocation')return {
location,
geolocation,
updateLocation
}
}
}script>
最后,如果要确保通过 provide
传递的数据不会被注入的组件更改,我们建议对提供者的 property 使用 readonly
。
<MyMarker />
</template>