vue父组件给子组件的组件传值provide inject的方法


Posted in Javascript onOctober 23, 2019

一般情况下我们父子之间的传值用的是props,这个就不多说了,但是如果想让父给子组件的组件传值怎么办呢,这里我们就可以用到 provide 和 inject(依赖注入)

provide/inject需要一起使用,我们可以从父组件的provide传值,子组件或者孙组件,就可以用inject来接受子组件的provide属性值

具体的可以看官网介绍provide/inject:https://cn.vuejs.org/v2/api/#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>

接下来我们可以看一下页面的

vue父组件给子组件的组件传值provide inject的方法

是可以展示的出来的,但是我们点击增加的时候,子组件们都没有响应,如果此时你有好好看文档的话,就应该猜出为什么了

vue父组件给子组件的组件传值provide inject的方法

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的方法

以上就是本次介绍的全部相关知识点,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
p5.js临摹旋转爱心
Oct 23 #Javascript
JavaScript 作用域scope简单汇总
Oct 23 #Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 #Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 #jQuery
JavaScript提升机制Hoisting详解
Oct 23 #Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 #Javascript
p5.js临摹动态图形的方法
Oct 23 #Javascript
You might like
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
python脚本替换指定行实现步骤
2017/07/11 Python
python语言中with as的用法使用详解
2018/02/23 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Python使用re模块验证危险字符
2020/05/21 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
副处级干部考察材料
2014/05/17 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
面试自我评价范文
2014/09/17 职场文书
毕业生入职感言
2015/07/31 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书