前言
我们知道,使用provide/inject
这一对API,可以暴露出父组件的数据和方法供所有后代组件使用。这个特性有两个部分:父组件有一个 provide
选项来提供数据,子组件有一个 inject
选项来开始使用这些数据。
现有父组件和子组件如下
父组件
:
1 | <template> |
子组件
:
1 | <template> |
如果父组件直接注入数据,不做任何处理,当我改变父组件的数据时,子组件的数据不变,可见响应式消失了。
那如何让注入的数据保持响应式了?
解决方案
1.传入响应式数据✨
vue2虽然不能像vue3那样创造响应式数据ref、reactive,但vue2的this
就是个响应式数据。如果我们直接在父元素中提供依赖this
,那么后代组件就能获得响应式。
父组件
:
1 | provide() { |
子组件
:
1 | <template> |
2.以函数式的方式传入✨
父组件中以函数式的方式提供依赖,后代组件中采用函数的方式调用。
父组件
:
1 | provide() { |
子组件
:
1 | <template> |
— 完结 — 🎉🎉🎉