文章详细讲述了Vue.js中provide和inject的高级用法，通过一个Tabs和TabPane的组件例子，展示了如何利用这两个特性实现多级组件间的动态协同，特别是如何在不破坏组件独立性的情况下传递状态和实现响应式更新。此外，还讨论了常规的解决方案和为何使用provide/inject的优化方案更优。
provide和inject原来用的不多，只是见人引用axios的时候在main.js里使用provide来注入
app.provide('axios', axios)这样，在所有的vue文件里都可以使用inject来获取这个注入的axios
const axios = inject("axios");这种利用provide和inject做全局变量的注入是比较常见的用法，后来我也一直使用这种方式进行axios的引用。
直到我看到ElementUI Tabs的做法后，才发现provide和inject还可以用到多级组件的协同上。
我们知道Tabs是由多个TabPane组成的，Tabs要负责显示标题，提供统一的切换功能，TabPane提供具体单个内容的展示
上面这个就是由两个TabPane组成的Tabs
这个两级关系的复杂关系在于，在具体实现的时候，每个pane的标题等信息是在pane里指定的，但是具体的展示实现，却是在父级的tabs里面去提供一个切换按钮。类似这样的结构（
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
