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 相关文章推荐
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 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
提取HTML标签
2006/10/09 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
Python模块文件结构代码详解
2018/02/03 Python
python读取文件名称生成list的方法
2018/04/27 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
2014年社区宣传工作总结
2014/12/02 职场文书
Java设计模式之代理模式
2022/04/22 Java/Android