vue3中的provide/inject(提供/注入)
vue3中的provide/inject(提供注入)
在说provide/inject
先说一下prop逐级穿透问题。
通常我们从父组件向子组件传递数据时,会用到props
。对于只需要传递一层或二层时还行,假如需要传递多层嵌套的组件,此时一级一级传递数据就会很繁琐,不利于编码,因此产生了provide/inject
,从而解决此类问题。
有了provide/inject
不用一级一级传递,只要是父组件提供了某个数据,隔代组件就能直接获取都数据,从而很方便。
provide()提供
为后代组件提供数据
import { provide } from 'vue';
export default {setup() {provide('message', 'hello!');}
}
接受两个参数,第一个参数称为注入名,也就是key,可以是字符串或者Symbol。第二个参数是值,要传递的数据,任意类型的数据。
应用层的provide()
传递的数据,整个实例的组件都能使用。
例如:
import { createApp } from 'vue'const app = createApp({})app.provide('message', 'hello!')
Inject()注入
用来接收provide
传递过来的数据
参数是注入名,也就是key。
<script setup>
import { inject } from 'vue'const message = inject('message')
</script>
如果提供的值是一个 ref,注入进来的会是该 ref 对象,不会自动解包为其内部的值,具有响应式。
注入默认值
就是key可能并没有任何父组件提供,而却注入此时就会发生错误,这个时候可以设置一个默认值。
// 如果没有祖先组件提供 "message"
// `value` 会是 "这是默认值"
const value = inject('message', '这是默认值')
和响应式数据配合使用
意思是加入注入组件想操作注入的数据的时候,尽可能的使其操作在父组件内,这样声明和变更操作都在父组件内,更容易维护。
<!-- 在父组件内 -->
<script setup>
import { provide, ref } from 'vue'const location = ref('North Pole')
// 修改值
function updateLocation() {location.value = 'South Pole'
}
provide('location', {location,updateLocation
})
</script>
<!-- 在注入方组件 -->
<script setup>
import { inject } from 'vue'const { location, updateLocation } = inject('location')
</script><template>// 点击事件修改<button @click="updateLocation">{{ location }}</button>
</template>
假如提供的数据不想让子组件去修改,则可以使用readonly()
,这样后代就不能操作此数据。
<script setup>
import { ref, provide, readonly } from 'vue'const count = ref(0)
provide('read-only-count', readonly(count))
</script>
使用Symbol作为注入名
如果一个大型项目,有很多的依赖项,可以使用Symbol作为注入名,可以避免注入名冲突。
例如:
// keys.js
export const myInjectionKey = Symbol()
// 在供给方组件中
import { provide } from 'vue'
import { myInjectionKey } from './keys.js'provide(myInjectionKey, { /*要提供的数据
*/ });
// 注入方组件
import { inject } from 'vue'
import { myInjectionKey } from './keys.js'const injected = inject(myInjectionKey)
vue3中的provide/inject(提供/注入)相关推荐
- VUE3组件 (4) 关于 Provide Inject 依赖注入
前言 以下代码和内容的使用都是在setup中,未使用TS. <script setup> </script> VUE3组件 (1) 关于defineProps() VUE3组件 ...
- vue3中的provide和inject
在vue2中我们已经使用过provide和inject来实现祖孙组件之间的数据传递,但是在vue3中由于我们使用setup,此时我们应该如何去使用provide和inject函数呢? 在vue中帮我们 ...
- Vue3+TS 中使用Provide/Inject 的例子
详见:Provide / Inject | Vue.js (vuejs.org) 作用:在深度嵌套的组件中,将 prop 沿着组件链逐级传递会很麻烦.使用 Provide/Inject可以直接将父组件 ...
- vue中的provide/inject的学习
前言 最近在看element-ui的源码,发现了一个这样的属性:inject.遂查看官网provider/inject provider/inject:简单的来说就是在父组件中通过provider来提 ...
- vue中的provide/inject的学习使用
irst:定义一个parent component ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <template> <div> ...
- vue3中Provide/Inject的使用
vue3中使用Provide/Inject依赖注入,将替代vue2中在原型链上挂载一些属性 //APP.vue//在app.vue内注册import { provide ,ref ,readonly} ...
- 浅析provide/inject用法、响应式、全局传递
前言 Vue的父子间传值 : props 爷孙或者更深嵌套的组件间传值: provide/inject 更复杂的结构:vuex provide/inject 提供/注入 provide 一个对象或返回 ...
- vue3中 provide 和 inject 用法
前言: 在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时, ...
- vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
最新文章
- RESTful API -备
- HOWTO:安装包卸载时如何保留部分文件不被卸载
- java wav 时间,Java-调整WAV文件的播放速度
- css a标签去掉下划线_CSS入门知识汇总
- 火狐 url 乱码_在Firefox中查看URL作为工具提示
- java高效复制文件并移动_Java 7:复制和移动文件和目录
- Flutter进阶第13篇: 打开外部浏览器、打开外部应用、拨打电话、发送短信
- Linux shell 数组
- 【自学Flutter】20.3 ListView.separated 的使用
- 元宇宙终极目标是打造六界
- 手把手系列--STM32H750移植FreeRTOS(二)--优化编译速度
- Specificity and sensitivity
- ​KAKA NFT | 潮物来袭!烤仔英雄系列NFT盲盒即将发售~
- 分享学JavaScript的第九天
- 如何储存图片方法jpg格式png格式#ps教程#ps抠图
- Domino内置备份功能妙用
- H264码流打包分析.整理
- windows下查看和关闭端口
- 华为校招java笔试题库_华为校招Java笔试题库,看你会不会做
- 【理论+实践】史上最全-论文中常用的图像分割评价指标-附完整代码
热门文章
- 乐学python怎么样_铁乐学Python_day07_集合and浅谈深浅copy
- 智能卡 PSAM 卡片文件结构
- 双重福利:计算机图书满100减50+满99 减10叠加券,更有抽奖送书活动,点击查看!...
- 快速理解深度信念网络
- python+selenium之元素、下拉列表的定位
- 大于23的男生女生都该看.看完你会变一个人
- JAVA常见面试题及解答
- win10/ubuntu18.04 双系统开机黑屏,无法通过grub 选择系统,直接进入Ubuntu系统
- 数据挖掘与机器学习:机器学习 --- 决策树
- (附源码)springboot校园购物网站APP 毕业设计041037