vue2中provide/inject的使用和响应式传值

本文详细介绍了Vue.js中provide和inject组件通信的方法,包括基本用法和实现响应式传值的两种策略:通过方法返回和传递可监听的对象。这种方法适用于解决深层组件间的通信问题,当props无法直接传递时提供了解决方案。
摘要由CSDN通过智能技术生成


前言

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


一、基本用法

在父组件中使用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的传值。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值