组件通信-＜slot＞

目录

1. 默认插槽

2. 具名插槽

3. 作用域插槽

1. 默认插槽

父组件：

<template><div class="father"><h3>父组件</h3><div class="container"><Category title="今日游戏推荐"><ul><li v-for="item in games" :key='item.id'>{{ item.name }}</li></ul></Category><Category title="今日美食城市"><img :src="imageUrl" alt="" /></Category><Category title="今日影视推荐"><video :src="videoUrl" controls></video></Category></div></div>
</template><script setup lang="ts" name="Father">
import Category from './Category.vue'
import { ref, reactive } from 'vue'
let games = reactive([{ id: 'asgdytsa01', name: '英雄联盟' },{ id: 'asgdytsa02', name: '王者荣耀' },{ id: 'asgdytsa03', name: '红色警戒' },{ id: 'asgdytsa04', name: '斗罗大陆' }
])
let imageUrl = ref('https://img-blog.csdnimg.cn/direct/fb1e1f109889467a85eec6af0984611c.png')
let videoUrl = ref('https://media.w3.org/2010/05/sintel/trailer.mp4')
</script>
<style scoped>
.father {background-color: pink;padding: 20px;
}.container {display: flex;justify-content: space-evenly;
}img,
video {width: 100%;
}
</style>

子组件：

<template><div class="category"><h2>{{ title }}</h2><slot>默认内容</slot></div>
</template><script setup lang="ts" name="Category">
defineProps(['title'])
</script>
<style scoped>
.category {width: 200px;height: 300px;background-color: aquamarine;
}h2 {background-color: chartreuse;width: 100;text-align: center;
}
</style>

2. 具名插槽

<template><div class="father"><h3>父组件</h3><div class="container"><Category><template v-slot:s2><ul><li v-for="item in games" :key='item.id'>{{ item.name }}</li></ul></template><template v-slot:s1><h2>今日游戏推荐</h2></template></Category><Category><template v-slot:s2><img :src="imageUrl" alt="" /></template><template v-slot:s1><h2>今日图片推荐</h2></template></Category><Category><!-- 写法 v-slot:s2 也可以 #s2 --><template #s2><video :src="videoUrl" controls></video></template><template #s1><h2>今日影视推荐</h2></template></Category></div></div>
</template><script setup lang="ts" name="Father">
import Category from './Category.vue'
import { ref, reactive } from 'vue'
let games = reactive([{ id: 'asgdytsa01', name: '英雄联盟' },{ id: 'asgdytsa02', name: '王者荣耀' },{ id: 'asgdytsa03', name: '红色警戒' },{ id: 'asgdytsa04', name: '斗罗大陆' }
])
let imageUrl = ref('https://img-blog.csdnimg.cn/direct/fb1e1f109889467a85eec6af0984611c.png')
let videoUrl = ref('https://media.w3.org/2010/05/sintel/trailer.mp4')
</script>
<style scoped>
.father {background-color: pink;padding: 20px;
}.container {display: flex;justify-content: space-evenly;
}img,
video {width: 100%;
}h2 {background-color: chartreuse;width: 100;text-align: center;
}
</style>

子组件：

<template><div class="category"><h2>{{ title }}</h2><slot name="s1">默认内容</slot><slot name="s2">默认内容</slot></div>
</template><script setup lang="ts" name="Category">
defineProps(['title'])
</script>
<style scoped>
.category {width: 200px;height: 300px;background-color: aquamarine;
}</style>

3. 作用域插槽

1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（新闻数据在News组件中，但使用数据所遍历出来的结构由App组件决定）

2. 具体编码：

父组件：

<template><div class="father"><h3>父组件</h3><div class="container"><!-- <Game v-slot:default="params"> --><!-- <Game #default="params"> --><Game v-slot="params"><ul><li v-for="g in params.games" :key="g.id">{{ g.name }}</li></ul></Game></div></div>
</template><script setup lang="ts" name="Father">
import Game from './Game.vue'</script>
<style scoped>
.father {background-color: pink;padding: 20px;
}.container {display: flex;justify-content: space-evenly;
}img,
video {width: 100%;
}h2 {background-color: chartreuse;width: 100;text-align: center;
}
</style>

子组件：

<template><div class="category"><h2>今日游戏榜单</h2><slot :games="games" a="哈哈"></slot></div>
</template><script setup lang="ts" name="Category">
import { reactive } from 'vue'
let games = reactive([{ id: 'asgdytsa01', name: '英雄联盟' },{ id: 'asgdytsa02', name: '王者荣耀' },{ id: 'asgdytsa03', name: '红色警戒' },{ id: 'asgdytsa04', name: '斗罗大陆' }
])
</script>
<style scoped>
.category {width: 200px;height: 300px;background-color: aquamarine;
}
</style>