前言

官网概念：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

一、基本用法

在父组件中使用provide传值，在子组件中用inject接收。

// 父组件
data() {return {name: "卷儿"}
},
provide: function() {return {name: this.name}},

// 子组件
inject: ['name'],

这种方法传递过来的数据是没有响应性的，当你改变父组件中的name时，子组件中接收的name并不会改变。
官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

二、响应式

1.方法一：传递的参数用一个方法返回

// 父组件
data() {return {name: "卷儿"}},provide: function() {return {newName: () => this.name}

// 子组件
inject: ['newName'],
computed: {hnewName() {return this.newName()}}

<!-- 子组件中的使用方式 -->
<h2>{{ hnewName }}</h2> <!-- 推荐使用这种方法 -->
<h2>{{ newName() }}</h2>

2.方法二：把需要传递的参数定义成一个对象

官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

// 父组件
data() {return {obj: {name: "卷儿"}}},provide: function() {return {// 传递一个对象obj: this.obj}},

// 子组件
inject: ['obj'],
computed: {// 也可以不用计算属性重新定义objName() {return this.obj.name}}

<!-- 子组件中的使用方法 -->
<h2>obj的name： {{objName}}</h2>
<h2>obj的name： {{obj.name}}</h2>

总结

主要解决深层次的组件嵌套，祖先组件向子孙组件之间传值。
一层嵌套的父子组件可以使用props来传值，props本身就是有相应性的。
根据自身代码选择合适的传值方式，并不一定非要用provide/inject的传值。

vue2中provide/inject的使用和响应式传值相关推荐

vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
聊聊 Vue 中 provide/inject 的应用
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
Vue2.0 —— 由设计模式切入，实现响应式原理
Vue2.0 -- 由设计模式切入,实现响应式原理 <工欲善其事,必先利其器> 既然点进来了,麻烦你看下去,希望你有不一样的收获. 大家好,我是vk,好久不见,今天我们一起来盘一盘关于 V ...
VUE2中provide 和 inject用法,以及怎么做响应式数据?
1. provide/inject说明 provide 和 inject, 用来实现实现跨组件之间通信. 父子/孙子组件之间任意通信. 在祖先组件中通过provide注入一个依赖,不论组件层次有多深, ...
vue3中Provide/Inject的使用
vue3中使用Provide/Inject依赖注入,将替代vue2中在原型链上挂载一些属性 //APP.vue//在app.vue内注册import { provide ,ref ,readonly} ...
html自动裁剪图片宽度,html中如何让图片按比例响应式缩放、并自动裁剪的css技巧...
响应式网站.移动端页面在DIV CSS布局中对于图片列表或图片排版时,如果想要图片按比例缩放,最简单的就是把img宽度设为100%,不设置高度,高度就会自动跟着高度缩放. 但是如果要达到的效果是,要让 ...
vue新特性provide/inject深入学习
阅读本文帮你你可以在使用provide/inject传递响应式数据时记住一个特性: provide传递的每一个响应式数据都需要值是一个引用不变的可监听对象. 在开发vue项目时,不可避免的需要进行组件 ...
vue3中 provide 和 inject 用法
前言: 在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时, ...
浅析provide/inject用法、响应式、全局传递
前言 Vue的父子间传值 : props 爷孙或者更深嵌套的组件间传值: provide/inject 更复杂的结构:vuex provide/inject 提供/注入 provide 一个对象或返回 ...

vue2中provide/inject的使用和响应式传值

文章目录

前言

一、基本用法

二、响应式

1.方法一：传递的参数用一个方法返回

2.方法二：把需要传递的参数定义成一个对象

总结

vue2中provide/inject的使用和响应式传值相关推荐

最新文章

热门文章