具名插槽slot无报错但不显示的原因

2022-04-24  本文已影响0人  迷失的信徒

场景:使用VueCLI2写的组件,然后拿到VueCLI3创建的项目当中就显示不了了;看了下官方文档,可能是版本问题,且slot的使用方法变了。
修改为:使用的每一个slot都需要一个template 包裹,且 slot=“名称” 修改为 v-slot:名称

原先代码为:

    <TabBarItem path="/cart" activeColor="pink">
      <img slot="item-img" src="~assets/img/tabbar/cart-normal@2x.png" />
      <img slot="item-img-active" src="~assets/img/tabbar/cart-select@2x.png" />
      <div slot="item-text">购物车</div>
    </TabBarItem>

改动后代码:

    <TabBarItem path="/cart" activeColor="pink">
      <template v-slot:item-img>
        <img src="~assets/img/tabbar/cart-normal@2x.png" />
      </template>
      <template v-slot:item-img-active>
        <img src="~assets/img/tabbar/cart-select@2x.png" />
      </template>
      <template v-slot:item-text>
        <div>购物车</div>
      </template>

这里的插槽定义的方法还是没变的,变的只是使用的方法。

成功解决不显示问题。

上一篇 下一篇

猜你喜欢

热点阅读