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 相关文章推荐
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 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
php中的一个中文字符串截取函数
2007/02/14 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现处理管道的方法
2015/06/04 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
如何对python的字典进行排序
2020/06/19 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
详解Python中的文件操作
2021/01/14 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
个人四风对照检查材料
2014/09/26 职场文书
武侯祠导游词
2015/02/04 职场文书
大国崛起日本观后感
2015/06/02 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android