浅谈provide与inject

在vue中有很多方法可以实现组件之间的传值，其中provide与inject也是组件传值的一种。

provide与inject的传值与props类似，前者可以给后代组件传值，而props是只能给子组件传值。

举个例子：
前提：a组件里调用了b组件，同时b组件里调用了c组件
区别：
a组件可以用props方法直接传数据给b组件，但不能传数据给c组件
a组件可以用 provide与inject 方法直接传递数据给b组件，也可以直接给c组件传值

具体的用法

a组件：

<template><div>a组件<bbb /></div>
</template>
<script>
import bbb from './bbb'
export default {provide() {return {msg: this.msg}},components: {bbb},data() {return {msg: 'a组件的数据'}}
}
</script>

b组件：

<template><div>b组件b---{{ msg }}<ccc /></div>
</template>
<script>
import ccc from './ccc'
export default {inject: ['msg'],components: {ccc}
}
</script>

c组件：

<template><div>c组件c---{{ msg }}</div>
</template>
<script>
export default {inject: ['msg']
}
</script>

效果展示：

但有一点要注意：是用provide与inject方法传值，如果值修改后面组件的值是不会跟着变得，也就是说值不会响应
也就是说：如果把a组件中的msg改了，b组件，c组件接收到的msg还是以前的数据，并不会变
那么问题来了如果想要响应式的效果怎么办呢
直接把传的数据变成复杂类型的数据就行了
例如传一个对象

<template><div>a组件<bbb /></div>
</template>
<script>
import bbb from './bbb'
export default {provide() {return {msg: this.passdata}},components: {bbb},data() {return {passdata: {msg: 'a组件的数据'}}}
}
</script>

这样我们就可以的到一个可以响应的数据，如果想改变直接this.passdata.msg去修改

浅谈provide与inject相关推荐

vue 中provide的用法_浅谈vue中provide和inject 用法
一.概念解析成对出现:provide和inject是成对出现的作用:用于父组件向子孙组件传递数据使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或 ...
vue 中provide的用法_[转]浅谈vue中provide和inject 用法
provide:Object | () => Object inject:Array | { [key: string]: string | Symbol | Object } provide ...
java对象头_浅谈java对象结构对象头 Markword
概述对象实例由对象头.实例数据组成,其中对象头包括markword和类型指针,如果是数组,还包括数组长度; | 类型 | 32位JVM | 64位JVM| | ------ ---- | ----- ...
浅谈 Linux 高负载的系统化分析
简介: 浅谈 Linux 高负载的系统化分析,阿里云系统组工程师杨勇通过对线上各种问题的系统化分析. 讲解 Linux Load 高如何排查的话题属于老生常谈了,但多数文章只是聚焦了几个点,缺少整体排 ...
java对象头markword_浅谈java对象结构对象头 Markword
概述对象实例由对象头.实例数据组成,其中对象头包括markword和类型指针,如果是数组,还包括数组长度; | 类型 | 32位JVM | 64位JVM| | ------ ---- | ----- ...
浅谈angular的作用
一.简单认识angular 1 AngularJS是什么? AngularJs(简称ng)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计we ...
浅谈Google认证失败项分析
https://www.cnblogs.com/houser0323/p/14002924.html 标签:Google认证.GMS认证.XTS失败项分析.Android.cts 作者:秋城 http ...
浅谈计算机图书的翻译——“增值翻译”的几个参考例子 (转)
浅谈计算机图书的翻译--"增值翻译"的几个参考例子 (转)[@more@] 我的一篇文章,请大家提提意见( Mailto:w-gao@263.NET">w-gao@ ...
浅谈计算机图书的翻译——“增值翻译”的几个参考例子
我的一篇文章,请大家提提意见( w-gao@263.net ),笔者的小小心愿是将"增值翻译"发展成一门可操作性极强的理论,:-) ------------------------ ...

浅谈provide与inject

浅谈provide与inject相关推荐

最新文章

热门文章