使用插槽封装组件

技巧

1. 标签用slot
2. 文本用props

子组件

<template>
  <div class="top">
    <slot name="left"></slot>
    <span>{{ title }}</span>
    <slot name="right"></slot>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
  },
};
</script>

父组件

<template>
  <top title="头部">
    <span slot="left">left</span>
    <span slot="right">right</span>
  </top>
</template>

<script>
import top from "@/components/top";
export default {
  components: {
    top,
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>