vue中插槽slot的简单用法

最新推荐文章于 2025-07-08 17:03:44 发布

原创最新推荐文章于 2025-07-08 17:03:44 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #slot

vue 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了 Vue.js 中如何使用 slot 进行内容分发。在父组件中定义模板，然后在子组件相应位置插入。未指定名称的 slot 将默认接收父组件未包裹的内容，若子组件未定义则内容不显示。同时，我们还探讨了具名插槽的使用，包括 v-slot: 的简写形式 #。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件中定义好使用的模板

<template v-slot:extraPath>
          <span class='extra-path' v-if='active==0'> (填写转账信息)</span>
          <span class='extra-path' v-if='active==1'> (确认转账信息)</span>
          <span class='extra-path' v-if='active==2'> (完成转账)</span>
        </template>

子组件中在需要的位置插入

<slot name="extraPath"></slot>

如果父组件引用子组件中存在没有被包裹在具体名称的模板中的内容，会默认插入没有名称的插槽中，如果没有这个插槽，内容不会显示

完整父组件调用子组件代码

<head-info  path-list=' / 表单页 / 分步表单 / ' current-path=' 分步表单'>
        <template v-slot:extraPath>
          <span class='extra-path' v-if='active==0'> (填写转账信息)</span>
          <span class='extra-path' v-if='active==1'> (确认转账信息)</span>
          <span class='extra-path' v-if='active==2'> (完成转账)</span>
        </template>
          <p class="bold">分步表单</p>
          <p>讲一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成</p>
        </head-info>

完整子组件代码

<template>
  <div class="header-content">
    <p><span> <i @click='gohome("/dashboard/analysis")'><router-link to="/dashboard/analysis">首页</router-link> </i> {{pathList}} </span> {{currentPath}}
      <slot name="extraPath"></slot>
     </p>
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: ['pathList', 'currentPath'],
  methods: {
    gohome (url) {
      this.$bus.$emit('gohome', url)
    }
  }
}
</script>

具名插槽v-slot:可以简写为#

完成样式