vue之插槽

app.vue

<template>
  <div>
    <h1>App 根组件</h1>
    <hr />

    <!-- 使用组件 -->
    <my-com>
    </my-com>
  </div>
</template>

<script>
// 导入组件
import MyCom from './MyCom.vue'

export default {
  name: 'MyApp',
  // 注册组件
  components: {
    MyCom,
  },
}
</script>

<style lang="less" scoped></style>

MyCom.vue

<template>
  <div class="com-container">
    <h3>MyCom 组件 --- 插槽的基础用法</h3>
    <hr />

    <p>这是第一个 p 标签</p>
    <slot>这是后备内容</slot>
    <p>这是最后一个 p 标签</p>
  </div>
</template>

<script>
export default {
  name: 'MyCom',
}
</script>

<style lang="less" scoped>
.com-container {
  border: 1px solid #efefef;
  box-shadow: 0px 1px 10px #efefef;
  margin: 20px;
  padding: 20px;
}
</style>