VUE之插槽

1、默认插槽

<template><div class="father"></div><h3>父组件</h3><div class="content"><Category title="热门游戏列表"><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul></Category><Category title="今日美食城市"><img :src="imgUrl" alt=""></Category><Category title="今日影视推荐"><video :src="videoUrl" controls></video></Category></div>
</template><script lang="ts" name="Father">import Category from './Category.vue'import {ref,reactive} from "vue"let games = reactive([{id:1,name:'英雄联盟'},{id:2,name:'绝地求生'},{id:3,name:'和平精英'},{id:4,name:'王者荣耀'}])let imgUrl = 'https://img2.baidu.com/it/u=3237968337,425972872&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'let videoUrl = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'</script><style scoped>
.category {background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 200px;height:300px;
}.content{display: flex;text-align: center;font-size: 18px;font-weight: 800;
}img,video{width: 100%;
}
</style>

<template><div class="category"></div><h2>{{  title }}</h2><slot>默认内容</slot>
</template><script lang="ts" name="Category"></script><style scoped>
.category {background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 200px;height:300px;
}.h2 {background-color: orange;
}
</style>

2、具名插槽

<Category title="热门游戏列表" ><template v-slot:s2><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul></template><!-- <template  v-slot:s1> --><template  #:s1><h2>热门游戏列表</h2></template></Category><template><div class="category"></div><h2>{{  title }}</h2><!-- 具名插槽 --><slot name="s1">默认内容1</slot><slot name="s2">默认内容2</slot>
</template>

3、作用域插槽

<template><div class="father"></div><h3>父组件</h3><div class="content"><Game> <template v-slot="params"><ul><li v-for="g in params.youxi" :key="g.id">{{ g.name }}</li></ul></template></Game><Game><template v-slot="params"><ol><li v-for="g in params.youxi" :key="g.id">{{ g.name }}</li></ol></template></Game><Game> <template v-slot="{youxi}"><h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3></template></Game></div>
</template>
<template><div class="game"><h2>游戏列表</h2><slot :youxi="games" x="哈哈" y="你好"></slot></div>
</template><script setup lang="ts" name="Game">import {reactive} from 'vue'let games = reactive([{id:'agshshgshhhs01',name:'英雄联盟'},{id:'agshshgshhhs02',name:'绝地求生'},{id:'agshshgshhhs03',name:'和平精英'},{id:'agshshgshhhs04',name:'王者荣耀'}])
</script><style scoped>
.game {width: 200px;height: 300px;background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;
}
</style>

组件关系	传递方式
父传子	props、v-model、$refs、默认插槽、具名插槽
子传父	props、自定义事件、v-model、$parent、作用域插槽
祖传孙、孙传祖	$attrs、provide、inject
兄弟间、任意组件间	mitt、pinia