vue中slot的特殊用法

在组件的封装中，我们常常希望组件的复用性更多，这就用到了slot语法，常用的slot语法

1.普通用法

子组件

<slot></slot>

父组件在对应位置写标签

2.利用slot语法获取子组件的值

子组件
<slot name="items" :content='modelContent.data'></slot>

父组件
<template #items='{content}'></template>

接收到子组件传来的值，做不同的渲染构成组件的差异化。

3.利用具名slot实现多处slot语法

子组件
<slot name="item1"></slot>
<slot></slot>
<slot name="item2"></slot>

父组件
<template #item1></template>
<p>11111</p>
<p>22222</p>   
<template #item2></template>