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状态 类似于这样,给 ...
随机推荐
- jQuery学习笔记(基础部分)
参考:菜鸟教程 一.简介 1.jQuery 是一个 JavaScript 库. 2.jQuery的版本:压缩版(用户生成)和未压缩(用于测试和开发) 3.jQuery的引入方式: 从http://jq ...
- 轻松上手nodeJs爬取想要页面的数据
开始之前请先确保自己安装了Node.js环境!!!!!!!! 1.在项目文件夹安装两个必须的依赖包 npm install superagent -S SuperAgent(官网是这样解释的) --- ...
- 最新版的node安装和配置注意事项
node在安装的时候,如果你不想用默认的安装路径,可以自定义路径进行安装,例如我的安装路径如下:F:\Program Files\nodejs 安装完成后,要对node进行配置: 在F:\Progra ...
- Ubuntu14.04搭建Boa服务
1. 下载 boa 源码 : https://sourceforge.net/projects/boa/ 版本:boa-0.94.13.tar.gz 2. 在Ubuntu 下解压进入 [boa-0.0 ...
- STM8硬件设计注意事项
1.中断 STM8的外部中断和STM32不一样,每个端口PX只有1个中断 2.ADC 1)Additional AIN12 analog input is not selectable in ADC ...
- Nginx实现rewrite重写
目录 Rewrite基本概述 Rewrite标记Flag Rewrite规则实践 Rewrite场景示例 Rewrite规则补充 rewrite优先级实战 Rewrite基本概述 什么是rewrite ...
- Harbor私有镜像仓库(下)
Harbor私有镜像仓库(下) 链接:https://pan.baidu.com/s/1MAb0dllUwmoOk7TeVCZOVQ 提取码:ldt5 复制这段内容后打开百度网盘手机App,操作更方便 ...
- Cesium鼠标事件
computed: { handler() { return new this.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas) } } ...
- BeanUtils.copyProperties()拷贝属性时,忽略空值
把source的属性值复制给target的相同属性上,注意:双方需要复制的属性要有get.set方法 BeanUtils.copyProperties(source, target, PublicUt ...
- js 微信公众号网页用户授权,获取微信code,access_tocken,用户信息
第一次做微信网页授权,过程有点艰难,主要是不知道redirect_uri的地址要怎么写,刚开始我以为就是授权结束后要跳转到的首页地址,于是写成了uri = 'http://18i194c049.ias ...