inject 响应式_跨级组件通信之provide/inject

​​原创:牛津小马哥web前端工程师陈小妹妹。

介绍

在深层次的组件通信中,我们除了使用中央事件总线eventbus外,还可以使用组件的依赖注入方法及provide/inject。

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

如果提供的是方法

provide: function () {

return {

fun: this.fun

}

}

如果提供的是数据

provide: function () {

return {

name: 'Bob'

}

}

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

//接受方法

inject: ['fun']

//接受数据

inject:['name']

实例演示

创建parent.vue,提供变量name,并调用children1组件

import Children1 from './children1'

export default {

data() {

return {

}

},

components:{

Children1

},

provide(){

return{

name:'我是你爷爷'

}

}

}

创建children1.vue,并在其中调用children2.vue

import Children2 from './children2'

export default {

components:{

Children2

}

}

创建children2.vue,并在其中注入祖先提供的变量

孙子收到信息:

export default {

inject:['name']

}

结果

通俗来讲,你可以把依赖注入看作一部分“大范围有效的 prop”, 祖先组件不需要知道哪些后代组件使用它提供的属性,后代组件不需要知道被注入的属性来自哪里。

但是,它还是有一定的负面效果。它将你应用程序中的组件与它们当前的组织方式耦合起来,使重构变得更加困难。同时所提供的属性是非响应式的。

provide和inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

官方文档也说了,如果想要想在祖先组件中更新所提供的数据,那么这意味着你可能需要换用一个像Vuex这样真正的状态管理方案了。

今天的内容到此结束了,希望可以帮到你。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值