provice & inject
简介
- provide:提供一个值,可以被后代组件
获取/注入
。 - inject:
获取/注入
一个由祖先组件或整个应用(通过app.provide()
)提供的值。
import { ref, provide } from 'vue'
// provide:提供一个值,可以被子代组件注入并被孙代。
// 提供静态值
provide('foo', 'bar')
// 提供响应式的值
const count = ref(0)
provide('count', count)
// 子孙组件:注入值的默认方式
const foo = inject('foo')
注入型API
-
作用:跨级通信父->子->孙,但兄弟组件不能互相获取,且父组件不能获取到子组件的组件属性。
-
使用场景:如elementUI的[el-form,el-form-item,el-input],三个组件层层传递。
-
注意:由于需要获取组件实例,所以
provide/inject
的API只能在setup
中使用,这也是compositionAPI
的精髓所在。 -
provice原理组件创建时注入数据,数据源是父组件的provide属性,不用递归
- 父组件声明provide属性
- 子组件默认使用父亲的provide属性,但是如果自己需要增加属性,则自己挂载新的provide对象,继承父亲的并解耦原型继承+解耦。
- 孙组件也遵循这一原则,层层传递
-
inject原理:直接取父组件的provide属性返回即可
-
源码 :