vue 3 学习笔记 (八)——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>
vue 3 学习笔记 (八)——provide 和 inject 用法及原理相关推荐
- Vue.js 学习笔记 八 v-for
v-for指令,是用来循环的,常用的情况有以下4种 <div id="divApp"><!--迭代数字--><p v-for="n in 5 ...
- ZooKeeper学习笔记(八):ZooKeeper集群写数据原理
写数据原理 写流程直接请求发送给Leader节点 这里假设集群中有三个zookeeper服务端 ACK (Acknowledge character)即是确认字符,在数据通信中,接收站发给发送站的一种 ...
- Vue.js 学习笔记 九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...
- ReactJS学习笔记八:动画
ReactJS学习笔记八:动画 分类: react学习笔记 javascript2015-07-06 20:27 321人阅读 评论(0) 收藏 举报 react动画 目录(?)[+] 这里只讨论Re ...
- 【opencv学习笔记八】创建TrackBar轨迹条
createTrackbar这个函数我们以后会经常用到,它创建一个可以调整数值的轨迹条,并将轨迹条附加到指定的窗口上,使用起来很方便.首先大家要记住,它往往会和一个回调函数配合起来使用.先看下他的函数 ...
- python3.4学习笔记(八) Python第三方库安装与使用,包管理工具解惑
python3.4学习笔记(八) Python第三方库安装与使用,包管理工具解惑 许多人在安装Python第三方库的时候, 经常会为一个问题困扰:到底应该下载什么格式的文件? 当我们点开下载页时, 一 ...
- ROS学习笔记八:创建ROS msg和srv
ROS学习笔记八:创建ROS msg和srv 本节主要讲述了如何创建和建立ROS msg和srv,同时使用命令行工具rosmsg.rossrv和roscp. msg和srv简介 msg:描述ROS m ...
- Vue.js 学习笔记 十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
- Vue.js 学习笔记 十一 自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
最新文章
- android gradle 设置 output文件名,如何使用gradle在APK文件名中设置versionName?
- POJ 1741 Tree(树分治)
- Angular 4 辅助路由
- shopeeLazada越南站点“热销品类”推荐
- 一个有趣的关于flash和多种设备交互等技术应用的演示网站
- 51nod 1907(多项式乘法启发式合并)
- oracle数据库查看归档路径,centos7下查oracle归档及物理文件路径
- Mean Shift算法(2)在OpenCV上的实现目标跟踪——直方图反向投影
- 红帽7编译安装mysql_精通RHEL7编译安装mysql-5.5.32
- Unity应用架构设计(4)——设计可复用的SubView和SubViewModel(Part 2)
- 3Com难道要走双品牌路线
- 【应用软件】用jpg+swf制作gif动感小图(附带AVI转gif技巧)
- 斗魔之残龙纹 第一章
- Google Safe Browsing API的实施
- sublime text 64位 3.3114 绿色汉化版下载地址
- hive-Fetch抓取
- 技术书写作你要知道的几件事
- MyBatis 关联映射
- E站账号cookie分享_关于亚马逊账买手账号的分类
- laravel 动态多语言切换功能