【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>
- 作用域插槽
理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(新闻数据在
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>