插槽

vue官网 插槽

1. 父内容在子组件中显示

只用于显示，不用做其他，就可以用插槽

父组件：

<子组件标签名 ...>
  <template slot="值">{{值}}</template>
</子组件标签名>

定义卡片的内容，将内容添加slot属性为插槽的名字

子组件

定义插槽，给定name

 <元素><slot name="值"></slot></元素>

拥有相同结构框架

插槽是组件中一块可动态改变HTML片段内容的区域

只要发现多个组件，拥有相同的结构框架，只要是内部HTML片段有不同时，可使用插槽。

使用

① 先定义一个组件包含统一的外部结构

<template>
  <div class="outer">
     ...其他内容...
     <slot></slot>  <!--占位-->
      ...其他内容...
  </div>
</template>

② 在要实现的vue中引入带插槽的外部组件

import outer from "外部结构路径"
export default {
  components: { outer:outer } //{outer}
}

③ 在要实现的vue中添加内容

<outer>
  <template>
    //占位的内容
  </template>
</outer>

具名插槽

步骤1使用<slot>占位时： <slot name="***"></slot>
步骤3： <template v-slot:***> ⇒ 可简写： <template #***>