在组件的封装中, 我们常常希望组件的复用性更多, 这就用到了 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>
来源: http://www.bubuko.com/infodetail-3145198.html