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

如果 provide 需要使用 data 内的数据时，这样写就会报错。访问组件实例 property 时，需要将 provide 转换为返回对象的函数。

provide(){

return{

info: this.msg

}

}

inject ：是一个字符串数组。如：

inject: [ ‘info’ ]

接收上边 provide 提供的 info 数据，也可以是一个对象，该对象包含 from 和 default 属性，from 是可用做的注入内容中搜索用的 key，default 属性是指定默认值。

在 vue2 中 project / 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}}