vue 3 学习笔记 (八)——provide 和 inject 用法及原理

//父组件

export default{

provide:{

info:“提供数据”

}

}

//子组件

export default{

inject:[‘info’],

mounted(){

console.log(“接收数据：”, this.info) // 接收数据：提供数据

}

}

provide / inject 类似于消息的订阅和发布。provide 提供或发送数据， inject 接收数据。

二、Vue3 的 provide / inject 使用

---

在组合式 API 中使用 provide/inject，两个只能在 setup 期间调用，使用之前，必须从 vue 显示导入 provide/inject 方法。

provide 函数接收两个参数：

provide( name,value )

name：定义提供 property 的 name 。

value ：property 的值。

使用时：

import { provide } from “vue”

export default {

setup(){

provide(‘info’,“值”)

}

}

inject 函数有两个参数：

inject(name,default)

name：接收 provide 提供的属性名。

default：设置默认值，可以不写，是可选参数。

使用时：

import { inject } from “vue”

export default {

setup(){

inject(‘info’,“设置默认值”)

}

}

完整实例1：provide/inject实例

//父组件代码

//子组件 代码

{{info}}

三、添加响应性

---

为了给 provide/inject 添加响应性，使用 ref 或 reactive 。

完整实例2：provide/inject 响应式

//父组件代码

info：{{info}}

// InjectCom 子组件代码

{{info}}