vue中slot的使用场景

首先写一个head的公共组件：

<template>
 <div>
 <h1>1</h1>
 <h2>2</h2>
 <slot name="one"></slot>
 <slot name="two"></slot>
 </div>
</template>

如我们所知，在默认情况下引用这个组件，这个组件的内容会全部显示出来。

但是我们现在的需求是one页面只期望显示slot为one的部分：

<template>
 <div>
 <div>
 <headTop>
 <div slot="one">
 我是插槽one
 </div>
 </headTop>
 </div>
 {{key}}
 </div>
</template>

<script>
import headTop from '@/components/head.vue'
export default {
 data () {
 return {
 key: '先登录'
 }
 },
 components: {
 headTop
 }
}
</script>

注：在head组件中的slot只是插槽的作用，具体的组件内容需要在父组件的 <div slot="one">我是插槽one</div> 中自定义