Vue3小菜:provice & inject使用及手写

35 阅读1分钟

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属性返回即可

  • 源码 :2022-07-08-16-58-36.png