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+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python编程羊车门问题代码示例
2017/10/25 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Python 移动光标位置的方法
2019/01/20 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
python 一维二维插值实例
2020/04/22 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
成人继续教育实施方案
2014/03/01 职场文书
公司股东合作协议书
2014/09/14 职场文书
解除劳动合同协议书
2014/09/17 职场文书
贷款工作证明模板
2015/06/12 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书