【slot】
-
插槽：简单说就是父组件内部使用了子组件，但是子组件内部某些结构需要使用者自行定义，此时就需要用到插槽实现
- 默认插槽
默认插槽的
name是default- 父组件
<template> <div> <Child> <h3>默认插槽</h3> </Child> </div> </template>- 子组件
<template> <div> <!-- 默认插槽 --> <!-- <slot name="default"></slot> --> <slot></slot> </div> </template>- 具名插槽
- 在插槽上加上
name,可以实现多个结构匹配 v-slot必须要加在组件标签或者template标签上
- 父组件
<template> <div> <Child> <!-- 可以简写成 <template #c1> --> <template v-slot: c1> <h3>插槽c1</h3> </template> <template v-slot: c2> <h3>插槽c1</h3> </template> </Child> </div> </template>- 子组件
<template> <div> <!-- 具名插槽 --> <slot name="c1"></slot> <slot name="c2"></slot> </div> </template>- 作用域插槽
理解：<span style="color:red">数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。</span>（新闻数据在
News组件中，但使用数据所遍历出来的结构由App组件决定）具体编码：
- 父组件：
<template> <div class="father"> <h3>父组件</h3> <div class="content"> <!-- <Hobbies v-slot="params"> --> <Hobbies #default="params"> <ul> <li v-for="y in params.hobbies" :key="y.id"> {{ y.name }} </li> </ul> </Hobbies> <Hobbies> <!-- 加在标签上会报错， Game组件上是允许的 --> <!-- <h3 #footer>sasdas</h3> --> <Game #footer></Game> </Hobbies> </div> </div> </template> <script setup lang="ts" name="Father"> import Game from './Game.vue'; import Hobbies from './Hobbies.vue' </script>- 子组件：
<Hobbies>
<template> <div class="game"> <h2>爱好</h2> <slot :youxi="hobbies" haha="哈哈" hehe="呵呵"></slot> </div> </template> <script setup lang="ts" name="Game"> import {reactive} from 'vue' let hobbies = reactive([ {id:'01',name:'读书'}, {id:'02',name:'唱歌'}, {id:'03',name:'跳舞'}, ]) </script>
