vue中插槽solt的使用

大家好，欢迎来到IT知识分享网。

solt就是插槽 默认会把组件中间的内容渲染出来

案例：

在app.vue中 直接在组件模版里写内容 是不会在页面中显示的

这个时候 就在card子组件里 写上solt标签 solt标签就代表根组件里那个div

运行结果：

具名插槽

card文件：

<template>
  <div>
    <div class="header">
      <p>我是卡片</p>
    </div>
    <div class="body">
      <slot></slot>
    </div>
  </div>
</template>

 在app.vue中 写两个div 则都会显示在类名body里

如果想要把第一段div里内容显示在header里 就可以使用具名插槽

此时 只需要 在插槽里给一个名字即可

<!--card.vue-->
<template>
  <div>
    <div class="header">
        <slot name="headers"></slot>
      <p>我是卡片</p>
    </div>
    <div class="body">
      <slot></slot>
    </div>
  </div>
</template>