vue使用插槽slot的过程中，父级组件设置了display：flex，但是插入组件的flex：1属性不生效

在用vue开发组件的时候，我预期的效果是这样的

但是实际开发的过程中出现了子组件始终不能均匀分布的问题，flex：1属性根本没生效，如下效果：

于是仔细检查每一处：
App.vue

TabBar组件

TabBarItem组件

发现了问题：
在TabBarItem组件的template中多嵌套了一层div，这是模板自动生成的我没有删除，导致实际的html机构是这样的：

这样的flex是肯定不会生效的，去掉多嵌套的那一层div，问题解决。