Vue3与Vue2插槽slot的使用区别，Vue3插槽样式

跟着coderwhy老师学做tabbar，效果如图：

 按照coderwhy老师的代码敲，发现底下的导航栏图标、文字都不显示！

原来是因为我创建的项目是Vue3，而coderwhy老师的是Vue2。

Vue3、Vue2对插槽slot的使用有区别！

App.vue文件中使用了TabBar组件，TabBar组件内有匿名插槽，TabBar组件插槽中插入，TabBarItem组件，TabBarItem组件内有两个具名插槽。（下面代码中空的几行，Vue3、Vue2写法不同，故空着先，后面再讲怎么写）

Vue2的项目写法为（coderwhy老师的写法）：

      
        
        
首页
      

 但是我这么写，不显示图标、文字，底下的导航栏为空。

能正常显示的写法（Vue3写法）：

⚠️ 要用template包住！ 用 v-slot 代替 Vue2 的 slot ！

但是发现，这样写以后，在 TabBarItem.vue 中的写样式（限制图标、文字大小），并不奏效！

 

Vue2项目，将 TabBarItem 的样式写在 TabBarItem.vue 中：

coderwhy老师替换插槽，有效果。

但是我没有效果，我以为是Vue3不能用原来组件的样式，于是复制了一份到App.vue 里。

结果是！！要把TabBarItem.vue 中的 style 的scoped 去掉！！

解决问题！