[转]浅谈vue中provide和inject 用法
Vue 用法 浅谈 Inject provide
2023-09-11 14:16:15 时间
原文地址:https://www.jianshu.com/p/d34a7df4cd6a
provide:Object | () => Object
inject:Array<string> | { [key: string]: string | Symbol | Object }
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本 新增的。
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
inject 选项应该是:
一个字符串数组,或
一个对象,对象的 key 是本地的绑定名,value 是:
在可用的注入内容中搜索用的 key (字符串或 Symbol),或
一个对象,该对象的:
from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
default 属性是降级情况下使用的 value
使用场景:由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据
一种最常见的用法是刷新vue组件
相关文章
- import Vue from 'vue';
- Laravel + Vue + element-ui 【前端项目一】vue 实现查看更多 5
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- Spring Boot + Vue 如此强大?
- JavaScript - vue.js / nuxt.js / uni-app / 微信小程序 js 时间戳与日期格式互转(时间戳转日期字符串格式,日期回转时间戳格式)支持转为日期字符串后自动补0
- [转]Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
- Vue——详解MVVM模型在vue中的使用
- Vue —— 创建响应式对象的四种方式对比(reactive、ref、toRef、toRefs)
- vue 父组件如何调用子组件的函数Methods
- vue指令用法
- vue二次实战
- vue启动入口
- Vue项目 跨域 解决方案与 vue.config.js 配置解析
- 基于Springboot+Vue+H5实现MiniTalk聊天APP
- 关于template标签用法总结(含vue中的用法总结)
- vue面试题汇总(一)
- VUE控制按钮状态
- 【转发】vue v-for循环的用法(索引,键值)
- VUE入门实例,模版组件用法
- vue 中 命名视图的用法
- Source Code Reading for Vue 3: How does `hasChanged` work?
- 解决:Vue调试工具vue-devtools安装方法——解决下载速度缓慢,安装报错问题
- Vue学习第19天——vue脚手架配置代理
- better-scroll在vue中的坑
- 使用VsCode搭建Vue开发环境