vue2 插槽slot

Vue2 插槽可分为 默认插槽、具名插槽、作用域插槽  

 

1. 默认插槽（基础用法）

当子组件只需一个 “自定义内容区域” 时，使用默认插槽（无需指定 name）

子组件（Child.vue）：定义插槽

 <div class="card-body">
      <!-- 插槽的默认内容：父组件未传内容时显示 -->
      <slot>这是默认内容（父组件没传内容哦）</slot>
    </div>

父组件（Parent.vue）：使用插槽

<template>
  <div>
    <!-- 场景1：传入简单文本 -->
    <Child>
      <p>这是父组件传入的简单内容</p>
    </Child>

    <!-- 场景2：传入复杂结构（HTML+组件） -->
    <Child>
      <div>
        <p>姓名：张三</p>
        <p>年龄：28</p>
        <!-- 甚至可以插入其他组件 -->
        <Button @click="handleClick">点击按钮</Button>
      </div>
    </Child>
  </div>
</template>

<script>

 

。。。。。。