vue2中provide/inject的使用与响应式传值详解

 更新时间:2022年09月22日 08:50:59   作者:Min_Fox  
Vue中 Provide/Inject实现了跨组件的通信,下面这篇文章主要给大家介绍了关于vue2中provide/inject的使用与响应式传值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

官网概念:这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。

一、基本用法

在父组件中使用provide传值,在子组件中用inject接收。

// 父组件
data() {
  return {
     name: "卷儿"
  }
},
provide: function() {
  return {
     name: this.name
   }
 },

// 子组件
inject: ['name'],

这种方法传递过来的数据是没有响应性的,当你改变父组件中的name时,子组件中接收的name并不会改变。
官方解释:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。

二、响应式

1.方法一:传递的参数用一个方法返回

// 父组件
data() {
    return {
      name: "卷儿"
    }
  },
  provide: function() {
    return {
      newName: () => this.name
    }
// 子组件
inject: ['newName'],
computed: {
   hnewName() {
     return this.newName()
   }
 }
<!-- 子组件中的使用方式 -->
<h2>{{ hnewName }}</h2> <!-- 推荐使用这种方法 -->
<h2>{{ newName() }}</h2>

2.方法二:把需要传递的参数定义成一个对象

官方解释:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。

// 父组件
data() {
    return {
      obj: {
        name: "卷儿"
      }
    }
  },
  provide: function() {
    return {
    // 传递一个对象
      obj: this.obj
    }
  },
// 子组件
inject: ['obj'],
computed: {
	// 也可以不用计算属性重新定义
   objName() {
     return this.obj.name
   }
 }
<!-- 子组件中的使用方法 -->
<h2>obj的name: {{objName}}</h2>
<h2>obj的name: {{obj.name}}</h2>

总结

主要解决深层次的组件嵌套,祖先组件向子孙组件之间传值。

一层嵌套的父子组件可以使用props来传值,props本身就是有相应性的。

根据自身代码选择合适的传值方式,并不一定非要用provide/inject的传值。

到此这篇关于vue2中provide/inject使用与响应式传值的文章就介绍到这了,更多相关vue2 provide/inject响应式传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中如何引入jQuery和Bootstrap

    vue中如何引入jQuery和Bootstrap

    本篇文章主要介绍了vue中如何引入jQuery和Bootstrap,详细的介绍了引入jQuery和Bootstrap的方法,有兴趣的可以了解一下。
    2017-04-04
  • Vue子组件props从父组件接收数据并存入data

    Vue子组件props从父组件接收数据并存入data

    这篇文章主要介绍了Vue子组件props从父组件接收数据并存入data的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Vue 2.X的状态管理vuex记录详解

    Vue 2.X的状态管理vuex记录详解

    这篇文章主要介绍了Vue 2.X的状态管理vuex记录的相关资料,文中介绍的非常详细,对大家的理解和学习具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-03-03
  • vue中配置mint-ui报css错误问题的解决方法

    vue中配置mint-ui报css错误问题的解决方法

    本篇文章主要介绍了vue中配置mint-ui报css错误问题的解决方法,非常具有实用价值,需要的朋友可以参考下
    2017-10-10
  • Vue实现跑马灯样式文字横向滚动

    Vue实现跑马灯样式文字横向滚动

    这篇文章主要为大家详细介绍了Vue实现跑马灯样式文字横向滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

    vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

    这篇文章主要介绍了vue-video-player 解决微信自动全屏播放问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 简单谈谈vue的过渡动画(推荐)

    简单谈谈vue的过渡动画(推荐)

    下面小编就为大家带来一篇简单谈谈vue的过渡动画(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue2实现在el-table里插入el-tag的示例代码

    vue2实现在el-table里插入el-tag的示例代码

    这篇文章主要介绍了vue2实现在el-table里插入el-tag的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-12-12
  • vue中的面包屑导航组件实例代码

    vue中的面包屑导航组件实例代码

    这篇文章主要介绍了vue的面包屑导航组件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • VUE3+TS递归组件实现TreeList设计实例详解

    VUE3+TS递归组件实现TreeList设计实例详解

    这篇文章主要为大家介绍了VUE3+TS递归组件实现TreeList设计实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09

最新评论