插槽slot使用

简单使用

component：test

<div>
  <slot>显示</slot>
</div>

使用
<test>覆盖原内容</test>

//注意：其实等价于匿名插槽
<test>
  <template #default>
    <div>覆盖原内容</div>
  </template>
</test>

具名插槽

//component：test

<div>
  <slot name="head"></slot>
</div>

//使用 v-slot或#
<test>
  <template #head>
    <h1>标题</h1>
  </template>
</test>

作用域插槽

//component：test

<div>
  <slot title="标题" value="作用域插槽"></slot>
</div>

//使用 v-slot或#
//可以写成v-slot:default="res" 或者 v-slot:default="{title,value}"
<test>
  <template v-slot="res">
    <h1>{{ res.title }}：{{ res.value }}</h1>
  </template>
</test>