vue组件中的插槽

最新推荐文章于 2024-09-13 14:34:15 发布

杀死一只知更鸟debug

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量342

点赞数 4

分类专栏： vue 前端随笔文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_63622279/article/details/140419694

版权

vue 同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

前端随笔

14 篇文章 0 订阅

订阅专栏

单个插槽

子组件中的插槽，通过slot标签实现。父组件通过template标签将自定义的内容插入到子组件中。

子组件：存在一个mian块的插槽

<template>
  <div class="layout">
    <div>标题</div>
    <div class="main">
      <slot></slot>
    </div>
  </div>
</template>

父组件：

<template>
  <div>
    <demo-child>
      <template>
        <div>父组件通过插槽自定义的内容</div>
      </template>
    </demo-child>
  </div>
</template>

多个插槽（具名插槽）

多个插槽的情况下，需要对不同的插槽进行区分（插槽名）

子组件：有三个插槽 header,main,footer

<template>
  <div class="layout">
    <div class="header">
      <slot></slot>
    </div>
    <div class="main">
      <slot></slot>
    </div>
    <div class="footer">
      <slot></slot>
    </div>
  </div>
</template>

父组件：通过v-slot:插槽名来进行具名插槽的插入

<template>
  <div>
    <demo-child>
      <template v-slot:header>
        <div>头部</div>
      </template>
      <template v-slot:main>
        <div>主体</div>
      </template>
      <template v-slot:footer>
        <div>底部</div>
      </template>
    </demo-child>
  </div>
</template>

父组件：通过#插槽名来进行具名插槽的插入

<template>
  <div>
    <demo-child>
      <template #header>
        <div>头部</div>
      </template>
      <template #main>
        <div>主体</div>
      </template>
      <template #footer>
        <div>底部</div>
      </template>
    </demo-child>
  </div>
</template>