组件插槽(slot)

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

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

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

而在父组件中

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

即子组件中的插槽(slot)内容为父组件使用子组件时,标签后的内容(除非没有)

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

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

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

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