简单理解

1.简单理解
　provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

概念解析

成对出现：provide和inject是成对出现的

作用：用于父组件向子孙组件传递数据

使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

代码解释

写法一

//父组件
provide: {user: 'John Doe'}--------------------
//子组件
inject: ['user']
//使用
console.log（this.user）

缺点：如果我们尝试在此处提供一些组件实例 property，则这将不起作用，

 provide: {todoLength: this.todos.length // 将会导致错误 'Cannot read property 'length' of undefined`},

写法二

 provide() {return {todoLength: this.todos.length}},

缺点：数据不会响应变化

推荐写法 ：写法三
在 setup() 中使用 provide 时，我们首先从 vue 显式导入 provide 方法。这使我们能够调用 provide 时来定义每个 property。

provide 函数允许你通过两个参数定义 property：

property 的 name ( 类型)
property 的 value

//父组件
import { provide } from 'vue'
export default {setup() {provide('location', 'North Pole')//location 键（标识符）-- North Pole //值 provide('geolocation', {longitude: 90,latitude: 135})}
}
// 子组件

provide 与 inject 的使用相关推荐

provide和inject，Vue父组件直接给孙子组件传值
Provide / Inject 该页面假设你已经阅读过了组件基础.如果你还对组件不太了解,推荐你先阅读它. 通常,当我们需要从父组件向子组件传递数据时,我们使用 props.想象一下这样的结构:有一 ...
inject 响应式_vue 的 provide 和 inject 依赖注入与 $parent
依赖注入还是有负面影响的.它将你的应用以目前的组件组织方式耦合了起来,使重构变得更加困难.同时所提供的属性是非响应式的.这是出于设计的考虑,因为使用它们来创建一个中心化规模化的数据跟使用$root做这 ...
[vue] 说说你对provide和inject的理解
[vue] 说说你对provide和inject的理解通过在父组件中inject一些数据然后再所有子组件中都可以通过provide获取使用该参数,主要是为了解决一些循环组件比如tree, menu, ...
vue 刷新当前页面、组件；provide、inject
provide.inject 最外层组件(祖先组件)向其所有子组件注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效:通过在App.vue,声明reload方法,控制router- ...
vue 中 provide 和 inject 共享数据
project 和 inject 是 vue 2.2.0 新增内容.官网说明 >> https://cn.vuejs.org/v2/api/#provide-inject 1. 概述后代 ...
vue 中provide的用法_浅谈vue中provide和inject 用法
一.概念解析成对出现:provide和inject是成对出现的作用:用于父组件向子孙组件传递数据使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或 ...
VUE2中provide 和 inject用法,以及怎么做响应式数据?
1. provide/inject说明 provide 和 inject, 用来实现实现跨组件之间通信. 父子/孙子组件之间任意通信. 在祖先组件中通过provide注入一个依赖,不论组件层次有多深, ...
vue2 provide和inject的使用
provide提供 inject注入两者组合一起使用:表示父组件像子组件或孙组件或孙孙组件传值. 官网链接:API - Vue.js vue项目中使用: 父组件:(provide是个方法,retu ...
关于组件之间使用provide和inject传值
1.在写项目的时候,由于组件封装的层次超过了两层,因而想起了用provide和inject传值的方式.provide和inject都是与data.methods.钩子函数同级,千万不要写错!! 基础用 ...
vue组件深度传值provide、inject,值类型响应式的方法
文章目录前言一.provide,inject是什么? 二.使用步骤 1.祖先组件provide注入,并且传入的是整个this指向 2.后代组件接收总结前言最近封装了一个上传,下载,查看附件的 ...

provide 与 inject 的使用

简单理解

概念解析

代码解释

provide 与 inject 的使用相关推荐

最新文章

热门文章