vue中可响应式provide/inject的实现

Vue.js踩坑记 专栏收录该内容
14 篇文章 44 订阅 ¥99.00 ¥29.90

一、基本概念

当需要访问父级组件的实例的时候,我们可以通过$parent属性来获取父级组件的实例。但是,在嵌套了多层组件并且想在较深层级的子组件中获取顶级父级组件时通过这个属性就不太好了。这个时候就要用到vue中依赖注入的概念了。

vue中依赖注入的具体实现是通过两个实例选项——provide/inject实现的。

provide选项允许我们指定我们想要提供给后代组件的数据/方法。示例:

export default {
    provide: function(){
        return {
            name: this.name,
            age: 0
        }
    },
    data(){
        return {
            name: 'a1'
        }
    }
}

然后在任何后代组件里,我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的 属性。示例:

export default {
    inject: ['name', 'age'],
    data() {
        return {
            name: this.name,
            age: this.age
        }
    }
}

相比 $parent 来说,这个

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值