slot

默认插槽/ 具名插槽/ 作用域插槽

父组件：

<div class="cart">
  <Message :show.sync="show">
    <!-- 作用域插槽 -->
    <!-- <template v-slot:title="slotProps">
      <strong>{{slotProps.title}}</strong>
    </template> -->
     <!-- 具名插槽 -->
    <template v-slot:title>
      <strong>{{title}}</strong>
    </template>
    <!-- 默认插槽 -->
    <template v-slot:default>
        {{msg}}
    </template>
  </Message>
</div>

子组件：

<template>
  <div>
    <div class="message-box" v-if="show">
      <!-- 作用域插槽（可从子组件获取内容） -->
       <!-- <slot name="title" title="作用域插槽">默认内容</slot> -->
      <!-- 具名插槽-获取指定内容的插槽（没有指定内容会使用默认内容） -->
     <slot name="title">默认内容</slot>
      <!-- 通过slot获取插槽内容 -->
      <slot></slot>
      <!-- 自定义事件处理必须为update:show -->
      <span class="message-box-close" @click="$emit('update:show',false)">X</span>
    </div>
  </div>
</template>