vue3中 provide 和 inject 用法及原理
前言：
在父子组件传递数据时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。
像这种情况，可以使用 provide 和 inject 解决这种问题，不论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据，父组件使用 provide 提供数据，子组件或孙组件 inject 注入数据。同时兄弟组件之间传值更方便。
一、Vue2 的 provide / inject 使用
provide ：是一个对象，里面是属性和值。如：
provide:{
info:"值"
}
如果 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实例
//父组件代码
<script>
import { provide } from "vue"
export default {
setup(){
provide('info',"值")
}
}
</script>
//子组件 代码
<template>
{{info}}
</template>
<script>
import { inject } from "vue"
export default {
setup(){
const info = inject('info')
return{
info
}
}
}
</script>
三、添加响应性
为了给 provide/inject 添加响应性，使用 ref 或 reactive 。
完整实例2：provide/inject 响应式
//父组件代码
<template>
<div>
info：{{info}}
<InjectCom ></InjectCom>
</div>
</template>
<script>
import InjectCom from "./InjectCom"
import { provide,readonly,ref } from "vue"
export default {
setup(){
let info = ref("今天你学习了吗？")
setTimeout(()=>{
info.value = "不找借口，立马学习"
},2000)
provide('info',info)
return{
info
}
},
components:{
InjectCom
}
}
</script>
// InjectCom 子组件代码
<template>
{{info}}
</template>
<script>
import { inject } from "vue"
export default {
setup(){
const info = inject('info')
setTimeout(()=>{
info.value = "更新"
},2000)
return{
info
}
}
}
</script>
上述示例，在父组件或子组件都会修改 info 的值。
provide / inject 类似于消息的订阅和发布，遵循 vue 当中的单项数据流，什么意思呢？就是数据在哪，修改只能在哪，不能在数据传递处修改数据，容易造成状态不可预测。
在订阅组件内修改值的时候，可以被正常修改，如果其他组件也使用该值的时候，状态容易造成混乱，所以需要在源头上规避问题。
readonly 只读函数，使用之前需要引入，如果给变量加上 readonly 属性，则该数据只能读取，无法改变，被修改时会发出警告，但不会改变值。
使用方法：
import { readonly } from "vue"
let info = readonly('只读info值')
setTimout(()=>{
info="更新info" //两秒后更新info的值
},2000)
运行两秒后，浏览器发出警告，提示 info 值不可修改。
所以我们就给provide发射出去的数据，添加一个只读属性，避免发射出去的数据被修改。
完整实例2的 provide 处添加 readonly 。
provide('info', readonly(info))
在子组件修改值的时候，会有一个只读提醒。
修改值的时候，还是需要在 provide 发布数据的组件内修改数据，所以会在组件内添加修改方法，同时也发布出去，在子组件处调用就可以了。
如：
//发布
let info = ref("今天你学习了吗？")
const changeInfo = (val)=>{
info.value = val
}
provide('info',readonly(info))
provide('changeInfo',changeInfo)
//订阅
const chang = inject('changeInfo')
chang('冲向前端工程师')
完整示例3：修改数据
// 父组件代码
<template>
<div>
info：{{info}}
<InjectCom ></InjectCom>
</div>
</template>
<script>
import InjectCom from "./InjectCom"
import { provide,readonly,ref } from "vue"
export default {
setup(){
let info = ref("今天你学习了吗？")
const changeInfo = (val)=>{
info.value = val
}
provide('info',readonly(info))
provide('changeInfo',changeInfo)
return{
info
}
},
components:{
InjectCom
}
}
</script>
//InjectCom 子组件代码
<template>
<div>
<button @click="chang('冲向前端工程师')">更新值</button>
</div>
</template>
<script>
import { inject } from "vue"
export default {
setup(){
const info = inject('info')
const chang = inject('changeInfo')
return{
info,
chang
}
}
}
</script>
到此这篇关于vue3中 provide 和 inject 用法及原理的文章就介绍到这了,更多相关 vue3 中provide 和 inject 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
正常情况下Vue推荐用props向子组件参数,但是在特定场景下,使用$attrs会更方便,下面这篇文章主要给大家介绍了关于vue2.x中$attrs使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
又是一个老生常谈的功能，接下来会从零实现一个万年日历，从布局到逻辑，再到随处可见的打卡功能。文中的示例代码简洁易懂，需要的可以参考一下2023-01-01
在vue3中使用el-tree-select实现树形下拉选择器效果
el-tree-select是一个含有下拉菜单的树形选择器,结合了 el-tree 和 el-select 两个组件的功能,这篇文章主要介绍了在vue3中使用el-tree-select做一个树形下拉选择器,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了vue实现列表无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
vue2结合element-ui实现TreeSelect树选择功能
这篇文章主要为大家详细介绍了vue2如何结合element-ui实现TreeSelect树选择功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2024-03-03
这篇文章主要介绍了vue过滤器实现日期格式化的案例分析，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
这篇文章主要给大家介绍了关于vue路由的配置和页面切换的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
本篇文章主要介绍了Vue2.X的路由管理记录之 钩子函数（切割流水线），具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
随着vue2的落幕,vue3越来成熟,有必要更新一下vue3的父子组件之间的传值方式,这里介绍下vue3+vite+ts父子组件之间的传值方式实例详解,感兴趣的朋友一起看看吧2023-12-12
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js，Axios 使用简单,包尺寸小且提供了易于扩展的接口，这篇文章主要介绍了vue中使用Axios最佳实践,需要的朋友可以参考下2022-09-09
最新评论