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这样真正的状态管理方案了。

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