技巧
- 标签用slot
- 文本用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>