好资源导航 » 文章资讯 » 详解Vue 多级组件透传新方法provide/inject

详解Vue 多级组件透传新方法provide/inject

2023-09-13 02:55:05 407

provide/inject是2.2新增的方法，可以以一个祖先组件向所有子孙后代注入依赖（一个内容）。

provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

Vue官方警告：

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

当然，警告只是警告，你完全可以正常使用。

使用方法非常像data和props的组合大礼包：

varProvider={
provide:{
foo:'bar'
},
//...
}
varChild={
inject:['foo'],
created(){
console.log(this.foo)//=>"bar"
}
//...
}

唯一的区别是你不用再一层层的传入了，过去用的event-bus虽然可以解决深层问题，但是会导致整个event-emit组成过于混乱，难以维护。使用provide/inject可以保证父子单向数据流的清晰性。

在React中Context的Provider/Consumer也有相同的效果，由于还没有具体使用过，对React本身也只有一面之缘，留待以后在了解，感兴趣的同学可以阅读文档了解。

参考文章：

Vue官方文档
Provide/InjectinVue2.2

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。