13. vue --- 插槽(1)_vue chacao1-优快云博客

本文介绍了Vue中的插槽机制，如何通过插槽实现父组件内容在子组件中动态显示，以及如何定义和使用具名插槽进行结构复用。步骤包括创建外部结构组件、引入并添加内容，适合处理具有相似框架但需个性化内容的场景。

插槽

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

<子组件标签名 ...>
  <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 #***>