provide和inject,Vue父组件直接给孙子组件传值
Provide / Inject
该页面假设你已经阅读过了组件基础。如果你还对组件不太了解,推荐你先阅读它。
通常,当我们需要从父组件向子组件传递数据时,我们使用 props。想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦。
对于这种情况,我们可以使用一对 provide
和 inject
。无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分:父组件有一个 provide
选项来提供数据,子组件有一个 inject
选项来开始使用这些数据。
场景:只能父组件给子组件传值,不能传回来
看代码
app.component('todo-list', {// ...provide() {return {todoLength: Vue.computed(() => this.todos.length)}}
})app.component('todo-list-statistics', {inject: ['todoLength'],created() {console.log(`Injected property: ${this.todoLength.value}`) // > Injected property: 5}
})
provide和inject,Vue父组件直接给孙子组件传值相关推荐
- vue父页面实时给子页面传值
实操笔记: 设置set this.DataList = []const varName='formObj' this[varName].PkIds && delete this[var ...
- vue父组给子子组件传html,vue组件之间互相传值:父传子,子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂作笔记-vue 通常页面的视图App.vue应为这样 一.父组件向子组件传值浏览器 1.建立子组件,在src/components/文件夹下新建一个C ...
- vue 中provide的用法_vue中的provide和inject
阅读element-ui源码,发现在设计子组时件用到了inject属性,随即查了一下官方文档,得知vue在2.2.0版本里新增了provide / inject: provide 和 inject 主 ...
- Vue 之 provide和inject的使用
在Vue中我们可以很方便的通过父组件往子组件传递属性,Props是我们将数据传递到子组件的主要方式之一.例如,下面的代码,我们往子组件(PopularList )传递了属性 name,其值是Most ...
- 从父组件中获取子组件的值
父组件中获取子组件中的值(三种的方式) 1. this.$root.子组件中的值 2. this.$parent.子值 $parent是一级一级访问的,如果子组件多的话需要多个$parent3. &l ...
- provide和inject的用法
1.provide与inject的功能 通过provide与inject,可以把一个祖先组件指定的数据和方法,传递给其所有子孙组件中 provide 和 inject 主要在开发高阶插件/组件库时使用 ...
- Vue详细介绍及使用(组件)
Vue详细介绍及使用 一.Vue组件概念 1.基本的概念 为什么需要组件化?在实际开发中,我们经常也会封装很多公共方法,达到复用的目的,也便于维护.对于前端也是一样,那么什么是组件? 官方定义 ...
- provide、inject、InjectionKey使用
provide 和 inject 主要为高阶插件/组件库提供用例.并不推荐直接用于应用程序代码中. 定义说明:这对选项是一起使用的.以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深, ...
- vue3知识点:provide 与 inject
文章目录 三.其它 Composition API(不常用,了解即可) 5.provide 与 inject 测试案例 完整代码 本人其他相关文章链接 三.其它 Composition API(不常用 ...
最新文章
- 奇怪吸引子---Finance
- ADSL+NAT配置实例
- 2022的第一天,立个目标
- 【岗位详情】腾讯广告机制策略算法工程师(北京)
- 学习笔记_vnpy实战培训day01
- ssh的mysql分页查询_在SSH框架下按条件分页查询
- 半导体物理复习总结(二)——半导体中的杂质和缺陷能级
- loki日志收集系统部署
- scrapy爬取晋江免费小说(章节)+ cookie爬vip章节
- python修改word文本框中的内容
- flutter 初视回味
- 【R语言】ggplot2作图补充(1)
- ORA-01034,ORA-27101,ORA-12514
- 硬盘 IDE 切换到 AHCI
- 总结篇--String、StringBuffer、StringBuilder
- 世界名著最经典的100句话,一生最少阅读一遍
- SpringBoot + 秒杀系统
- 春招进行时,当代大学生求职行为大赏
- 分布式持久内存文件系统Octopus(ATC-17 )分析(四)
- wpe3.0汉化版_3.0版