provide和inject 用法
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的斜体样式时间里始终生效。
使用场景:由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据
// 父组件内
provide:Object | () => Object
// 子组件内
inject:Array<string> | { [key: string]: string | Symbol | Object }
//父组件内
<template><div id="app"></div>
</template><script>export default {data () {return {datas: [{id: 1,label: '产品一'},{id: 1,label: '产品二'},{id: 1,label: '产品三'}]}},// 发送数据provide {return {datas: this.datas}}}</script>
// 孙组件
<template><div><ul><li v-for="(item, index) in datas" :key="index">{{ item.label }}</li></ul></div>
</template><script>export default {// 接受数据inject: ['datas']}</script>
提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
祖先组件不需要知道哪些后代组件使用它提供的属性
后代组件不需要知道被注入的属性来自哪里
provide和inject 用法相关推荐
- Vue 3的provide和inject用法
了解Vue 3的provide和inject用法 前言 在组合式API中的用法 基本用法 前言 provide和inject在Vue 2中已经被广泛应用,不是新鲜API,3.0重新认识一下它们两个. ...
- VUE2中provide 和 inject用法,以及怎么做响应式数据?
1. provide/inject说明 provide 和 inject, 用来实现实现跨组件之间通信. 父子/孙子组件之间任意通信. 在祖先组件中通过provide注入一个依赖,不论组件层次有多深, ...
- vue 中provide的用法_[转]浅谈vue中provide和inject 用法
provide:Object | () => Object inject:Array | { [key: string]: string | Symbol | Object } provide ...
- vue 中provide的用法_浅谈vue中provide和inject 用法
一.概念解析 成对出现:provide和inject是成对出现的 作用:用于父组件向子孙组件传递数据 使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或 ...
- vue中provide和inject 用法
我们平时在开发的时候,最常用的父子组件通信方式就是父组件绑定要传递给子组件的数据,然后子组件通过props属性接收.但是一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读性不高,不便 ...
- vue3中 provide 和 inject 用法
前言: 在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时, ...
- vue 3 学习笔记 (八)——provide 和 inject 用法及原理
在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传 ...
- vue3 provide 与 inject 用法
1 说明: provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法,而在任何后代组件中,我们可以使用inject来接收provide提供的数据和方法. 2 用法: 父亲组件 < ...
- vue 中provide的用法_vue 中的 provide 和 inject 用法
provider/inject:简单来说就是在父组件 provide 中提供变量,子组件 inject 中来注入,然后可以在子组件内部使用 provide 的变量 需要注意的是这里不论子组件有多深,只 ...
最新文章
- App.Config详解
- 1.模型 16个相机参数(内参、外参、畸变参数)
- 关于Hexo6.0搭建个人博客(github+Google-收录篇)
- 项目开发中常用JS表单取值方法
- VTK:超流线用法实战
- jdk1.8新特性(五)——Stream
- python基础(part4)--语句
- eclipse html自动对齐,MyEclipse和Eclipse中jsp、html格式化自动排版问题
- ES5-19 变量声命周期、垃圾回收原理、arguments
- 文件共享服务器第二部,第二章-构建Samba文件共享服务器.docx
- 循环自相关函数和谱相关密度(五)——实信号、复信号模型下的QPSK信号循环谱MATLAB仿真结果及代码
- 使用【Linux操作系统】必须掌握的基本命令
- 透明怎么弄_玻璃球里的花纹是怎么弄进去的?谜终于解开了!
- ArcGIS 9.3安装流程(包括Desktop和Server)
- 有效提升 Virtual Server 2005 R2 with SP1 的速度
- win10浏览器闪退_win10系统打开ie11浏览器出现闪退的两种解决方法
- 从产品角度看人口政策和生育减少问题
- ElasticSearch教程——倒排索引及其数据结构以及优缺点
- 记一次npm安装依赖奇怪的gyp报python错误
- 拉里·埃里森亲自支招,数据库自动化之后,DBA何去何从???