vue slot插槽

最新推荐文章于 2022-06-18 16:51:36 发布

陈醋拌饭

最新推荐文章于 2022-06-18 16:51:36 发布

阅读量130

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44167504/article/details/115523550

版权

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中的插槽(v-slot)功能，通过一个名为TabBarItem.vue的组件示例，展示了如何定义和使用插槽来实现可复用的组件结构。在父组件(farther.vue)中，我们看到如何通过插槽定制TabBarItem的内容，如图片和文本，实现了在不同页面显示不同内容的能力，从而提高了代码的复用性和灵活性。

摘要由CSDN通过智能技术生成

vue slot插槽

插槽的定义放在可复用的文件，在父级文件中调用，对应插槽的名称可在不同页面使用同样的架构但显示不一样的内容

TabBarItem.vue

<template>
  <div class="tab-bar-item" @click="itemClick">
    <slot v-if="!isActived" name="slot-img"></slot>
    <slot v-else name="slot-active-img"></slot>
    <div :style="activeStyle">
      <slot name="slot-text"></slot>
    </div>
  </div>
</template>

farther.vue

<div id="tabbar">
    <TabBarItem path="/home" active-color="#d4237a">
      <template v-slot:slot-img>
        <img src="@/assets/img/tabbar/Home.svg" alt="">
      </template>
      <template v-slot:slot-active-img>
        <img src="@/assets/img/tabbar/Home2.svg" alt="">
      </template>
      <template v-slot:slot-text>
        <div>首页</div>
      </template>
    </TabBarItem>
  </div>