vue provide/inject 父组件如何给孙子组件传值
一般情况下我们父子组件之间的传值用的是props,这个就不多说了,但是如果想让父组件给子组件的组件传值怎么办呢,如果还用props的话肯能会比较复杂,这里我们就可以用到 provide 和 inject(依赖注入),当然provide/inject也支持父子组件的传值
provide/inject需要一起使用,我们可以从父组件的provide传值,子组件或者孙组件,就可以用inject来接受子组件的provide属性值
具体的可以看官网介绍provide/inject
下面我们可以写个简单的例子来演示一下
父组件parent,我们在里面引入了一个子组件provideChild
<template>
<div>
<button @click="add">点击增加</button>
<provideChild/>
</div>
</template>
<script>
import provideChild from '@/components/provideChild'
export default {
components:{provideChild},
data () {
return {
foo:5
}
},
//依赖注入传值
provide(){
return{
newFoo:this.foo
}
},
methods:{
add(){
this.foo ++
},
}
}
</script>
子组件provideChild,我们同时又在子组件里面引入了一个他的子组件
我们可以看到他的打印出注入的newFoo值是5
<template>
<section>
<div>我是子组件:{{newFoo}}</div>
<childChild/>
</section>
</template>
<script>
import childChild from '@/components/childChild'
export default {
components:{
childChild
},
inject:['newFoo'],
mounted(){
console.log(this.newFoo)
}, }
</script>
孙子组件childChild,是子组件的组件
<template>
<div>我是子组件的组件:{{newFoo}}</div>
</template>
<script>
export default {
inject:['newFoo'],
}
</script>
接下来我们可以看一下页面的
是可以展示的出来的,但是我们点击增加的时候,子组件们都没有响应,如果此时你有好好看文档的话,就应该猜出为什么了
provide必须是个对象inject的绑定值才可以响应,那么我们可以试一试
//parent父组件的写法
<template>
<div>
<button @click="add">点击增加</button>
<provideChild/>
</div>
</template>
<script>
import provideChild from '@/components/provideChild'
export default {
components:{provideChild},
data () {
return {
fooObj:{
foo:5
}
}
},
//依赖注入传值
provide(){
return{
newFoo:this.fooObj
}
},
methods:{
add(){
this.fooObj.foo ++
},
}
}
</script> //子组件provideChild
<template>
<section>
<div>我是子组件:{{newFoo.foo}}</div>
<childChild/>
</section>
</template>
<script>
import childChild from '@/components/childChild'
export default {
components:{
childChild
},
inject:['newFoo'],
mounted(){
console.log(this.newFoo)
}, }
</script> //孙子组件childChild
<template>
<div>我是子组件的组件:{{newFoo.foo}}</div>
</template>
<script>
export default {
inject:['newFoo'],
}
</script>
这样我们就可以操作父组件的添加方法,得到子孙组件的响应
vue provide/inject 父组件如何给孙子组件传值的更多相关文章
- Vue provide/inject 部分源码分析 实现响应式数据更新
provide/inject 数据响应式更新的坑及源码解析 下面是我自己曾经遇到 一个问题,直接以自己QA的形式来写吧 自问自答了,需要的同学也可以直接访问segmentfault地址 官网给出实例, ...
- vue高级组件之provide / inject
转载:https://blog.csdn.net/Garrettzxd/article/details/81407199 在vue中不同组件通信方式如下 1.父子组件,通过prop 2.非父子组件,通 ...
- vue 组件传值$attrs $listeners $bus provide/inject $parent/$children
$attrs 包含了父作用域中不作为prop被识别的特性绑定,当一个组件没有声明props时,这里会包含所有父作用域的绑定, $listeneers 包含了父作用域中的v-on事件监听器,它可以通过v ...
- provide inject应用及和props对比
之前本人写过几篇element ui源码解析,其中提到provide/inject,当时只是匆匆带过,没有做深入研究,直到后来一次开发,需要实现孙组件更改父组件的值才想起来,原来这一对属性有如此大的用 ...
- vue $attrs 父组件和孙子组件的传值,传函数
上一篇我们说到provide/inject的依赖注入的传值方法,今天我们来说一下另一个父组件给孙子组件的传值方式$attrs 我们接着上一个例子继续来写 parent父组件 我们给child子组件穿了 ...
- vue组件通讯之provide / inject
什么是 provide / inject [传送门] vue的组件通讯方式我们熟知的有 props $emit bus vuex ,另外就是 provide/inject provide/inject ...
- vue 父子组件传值的另外一种方式 provide inject
1.文档说明 https://cn.vuejs.org/v2/api/#provide-inject 2.实例 element ui的dropdown组件 dropdown.vue: provide( ...
- 组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双向绑定数据
组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...
- Vue.js最佳实践--给大量子孙组件传值(provide/inject)
开发中有个需求,有个Parent组件(例如div)下,输入框,下拉框,radiobutton等可编辑的子孙组件几百个,根据某个值统一控制Parent下面的所有控件的disabled状态 类似于这样,给 ...
随机推荐
- linux缺頁異常處理--內核空間[v3.10]
缺頁異常被觸發通常有兩種情況—— 1.程序設計的不當導致訪問了非法的地址 2.訪問的地址是合法的,但是該地址還未分配物理頁框 下面解釋一下第二種情況,這是虛擬內存管理的一個特性.盡管每個進程獨立擁有3 ...
- shell数学运算
shell的数学运算 branches@ubuntu:~$ var1=$[ * ] branches@ubuntu:~$ echo $var1 branches@ubuntu:~$ var2=$[$v ...
- 43.Word Break(看字符串是否由词典中的单词组成)
Level: Medium 题目描述: Given a non-empty string s and a dictionary wordDict containing a list of non- ...
- ng2-file-upload插件在ionic3中的使用方法
本文主要说明在ionic3中使用ng2-file-upload插件,上传多种类型文件(图片.word.excel.ppt.mp4等)的使用方法. 1.html代码: <button ion-bu ...
- ThinkPHP的MVC模式
ThinkPHP基于MVC(Model-View-Controller,模型-视图-控制器)模式,并且均支持多层(multi-Layer)设计. 模型(Model)层 默认的模型层由Model类构成, ...
- zxing opencv
- 力扣—one plus(加一) python实现
题目描述: 中文: 给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储单个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头 ...
- Qt Unknown module(s) in QT: webengine
到今天位置好像Qt 出到了5.10还是5.9.x吧,本身是用MSVC 5.7.0本身就有支持 webengine这个模块 然后跟风升级了5.9.1,公司项目不用qt框架了用VC渣渣6.0.....然后 ...
- Cesium截图功能
首先安装 canvas2image npm intsall canvas2image --save 因为项目基于vue,所以需要在canvas2image的最后面 加上 export default ...
- QTcpSocket学习
一.涉及到的函数 监听:tcpServer->listen(QHostAddress::LocalHost, 6666) 错误信息:tcpServer->errorString() 新连接 ...