简单理解vue的slot插槽

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

weixin_33978044

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

阅读量68

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hpx2020/p/vue.html

本文通过一个生动的比喻介绍了 Vue.js 中 Slot 的使用方法。将 Slot 比作电脑主板上的插槽，通过不同的插槽插入 CPU、显卡等硬件的方式，展示了如何在 Vue 组件中使用默认和具名 Slot 来填充内容。

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

slot的意思是插槽，想想你的电脑主板上的各种插槽，有插CPU的，有插显卡的，有插内存的，有插硬盘的，所以假设有个组件是computer，其模板是

<template>
　　<div>
  　　<slot name="CPU">这儿插你的CPU</slot>
  　　<slot name="GPU">这儿插你的显卡</slot>
  　　<slot name="Memory">这儿插你的内存</slot>
  　　<slot name="Hard-drive">这儿插你的硬盘</slot>
　　</div>
</template>

那么你要攒一个牛逼轰轰的电脑，就可以这么写：

<template>
    <computer>
      <div slot="CPU">Intel Core i7</div>
      <div slot="GPU">GTX980Ti</div>
      <div slot="Memory">Kingston 32G</div>
      <div slot="Hard-drive">Samsung SSD 1T</divt>
    </computer>
</template>