vue v-slot 插槽的使用

最新推荐文章于 2024-12-23 09:15:21 发布

Martin Wu

最新推荐文章于 2024-12-23 09:15:21 发布

阅读量437

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42390015/article/details/99544067

本文介绍了一种在Vue中更新的插槽语法，推荐使用v-slot替代旧的slot标记。展示了如何在test组件中利用v-slot传递内容和特定插槽名称，如header和footer，并提供了代码示例。

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

slot 已经废弃，请使用v-slot代替

组件test:

<template >

    <div style="width: 400px;  border: 1px solid #ccc;">

       <header>
      <div>{{title}}</div>
       </header>

      <main style="padding: 30px 20px;">
        <slot ></slot>
      </main>

      <footer>
        <slot name="footer" ></slot>
      </footer>

    </div>

</template>

<script>
export default {
  props: ['title'],
}
</script>

使用组件：

<test  :title="title" >

        <span>这是一段信息</span>

        <!-- slot 废弃 -->
        <!-- <span slot="footer">
          <el-button type="primary" @click="visible=true">确认</el-button>
        </span> -->
        <!-- v-slot:footer 简写  #footer -->
        <template v-slot:footer>
          <el-button type="primary" @click="visible=true">确认</el-button>
        </template>
    </test>