组件插槽（slot）

• ， 15 8月 2021
• 作者 847954981@qq.com
• 前端学习

组件插槽（slot）

在子组件中用 slot 标签预留一个位置，slot标签内的内容即为后备内容。

后备内容：当父组件不在插槽内添加内容时，插槽显示的内容

代码语言：javascript复制

<div class="modal-content">
  <slot>这是个弹框</slot>
  <div class="footer">
    <button @click="close">close</button>
    <button @click="confirm">confirm</button>
  </div>
</div>

而在父组件中

代码语言：javascript复制

<Modal :visible.sync="visible">
  <div>插槽内容</div>
</Modal>
这里子组件叫 Modal

即子组件中的插槽（slot）内容为父组件使用子组件时，标签后的内容（除非没有）

当我们使用多个插槽时，我们需要区分插槽来使用它，所以，我们可以在 slot标签内加入 name属性来定义，此时有name的插槽叫“具名插槽”，而没有名字的默认插槽叫“匿名插槽”。

在定义插槽名字之后，我们可以在使用插槽的内容中添加 v-slot:插槽名 属性来完成插入

代码语言：javascript复制

<template v-slot:header>
    <h1>Modal title</h1>
  </template>

注意的是， v-slot 是绑定操作，后面不需要引号，跟的也是冒号，而 name 后面需要‘=’加上引号

com 前端

0 人点赞