插槽

插槽：当好几个父组件引入同一个子组件的时候，希望每次引入都有不同的变化

匿名插槽

TIP

子组件：定义 <slot></slot> 插槽占位

父组件：利用 <slot>自定义内容</slot> 替换子组件的插槽占位

1/* 父组件 */
2<template>
3  <h2>父组件</h2>
4  <hr />
5  <Child>
6    <slot>我是Child的匿名插槽</slot>
7  </Child>
8</template>
9
10<script lang="ts" setup>
11import Child from './ChildView.vue'
12</script>
13
14/* 子组件 */
15<template>
16  <div>我是子组件</div>
17  <slot></slot>
18</template>

具名插槽

TIP

子组件：定义 <slot name="xx"></slot> 插槽占位；

父组件：调用 <template v-slot:xx>自定义内容</template> 替换子组件插槽占位；

注意：Vue3中 v-slot: 可以简写成 # ，即 v-slot:xx 可以简写成 #xx

1/* 父组件 */
2<template>
3  <Child>
4    <template v-slot:aa>我是Child的具名插槽aa</template>
5    <template #bb>我是Child的具名插槽bb</template>
6  </Child>
7</template>
8
9<script lang="ts" setup>
10import Child from './ChildView.vue'
11</script>
12
13/* 子组件 */
14<template>
15  <div>子组件</div>
16  <slot name="aa"></slot>
17  <hr />
18  <slot name="bb"></slot>
19</template>

插槽传值

TIP

子组件：通过 <slot name="插槽名" :自定义属性="子组件数据"></slot> 传值；

父组件：通过 <template #插槽名="scope"></template> ，在 template 内通过 scope.自定义属性 获取值；

1/* 父组件 */
2<template>
3  <Child>
4    <template v-slot:aa="scope">
5      <ul>
6        <li>{{ scope.msg }}</li>
7        <li>{{ scope.title }}</li>
8      </ul>
9    </template>
10  </Child>
11</template>
12
13<script lang="ts" setup>
14import Child from './ChildView.vue'
15</script>
16
17/* 子组件 */
18<template>
19  <div>子组件</div>
20  <slot name="aa" :msg="msg" :title="title"></slot>
21</template>
22
23<script lang="ts" setup>
24let msg = '我是子组件的数据',
25  title = '子组件的具名插槽aa'
26</script>

插槽#

匿名插槽#

具名插槽#

插槽传值#

插槽

匿名插槽

具名插槽

插槽传值