[JavaScript知识库]vue: slot插槽不起作用的解决办法

slot插槽不起作用的解决办法

原因：虽然没有报错，但是不显示内容，可能是版本问题，slot插槽的使用方法已经改变

修改为：使用的每一个slot都需要一个 template 包裹，且 slot=“名称” 修改为 v-slot:名称

下面通过一个例子说明使用slot

原先：

<template>
  <tab-bar>
      <tab-bar-item path="/home">
          <img slot="item-icon" src="../../../assets/img/tabbar/home.svg" alt="">
          <img slot="item-icon-active" src="../../../assets/img/tabbar/home_active.svg" alt="">
          <div slot="item-text">首页</div>
      </tab-bar-item>
      
      <tab-bar-item path="/category">
      		<img  slot="item-icon" src="../../../assets/img/tabbar/category.svg" alt="">
          <img slot="item-icon-active" src="../../../assets/img/tabbar/category_active.svg" alt="">     
          <div slot="item-text">分类</div>
      </tab-bar-item>
</template>

修改为：

<template>
  <tab-bar>
      <tab-bar-item path="/home">
          
        <template v-slot:item-icon>
          <img src="../../../assets/img/tabbar/home.svg" alt="">
        </template>

        <template v-slot:item-icon-active>
          <img  src="../../../assets/img/tabbar/home_active.svg" alt="">
        </template>

        <template v-slot:item-text>
          <div>首页</div>
        </template>

      </tab-bar-item>

      <tab-bar-item path="/category">
        <template v-slot:item-icon>
          <img  src="../../../assets/img/tabbar/category.svg" alt="">
        </template>
        <template v-slot:item-icon-active>
          <img  src="../../../assets/img/tabbar/category_active.svg" alt="">
        </template>
        <template v-slot:item-text>
          <div>分类</div>
        </template>
      </tab-bar-item>
</template>