一.默认插槽
1.在组件中留下插槽slot
<template>
<div class="category">
<h3>{
{ title }}分类</h3>
<!-- 插槽 -->
<slot>我是默认值, 使用者没有传递具体结构时, 显示</slot>
</div>
</template>
<script>
export default {
props: ["title"],
};
</script>
2.在引入组件的文件中用组件标签包裹住要放入插槽的内容
<template>
<div class="container">
<ACategory title="美食">
<!-- 将图片放入插槽 -->
<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" />
</ACategory>
<ACategory title="游戏">
<!-- 将列表放入插槽 -->
<ul>
<li v-for="(item, index) in games" :key="index">{
{ item }}</li>
</ul>
</ACategory>
<ACategory title="电影">
<!-- 将视频放入插槽 -->
<video
controls
src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
></video>
</ACategory>
</div>
</template>
<script>
import ACategory from "./components/ACategory.vue";
export default {
name: "App",
components: {
ACategory },
data() {
return {
foods: ["火锅", "烧烤", "小龙虾", "牛排"],
games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《尚硅谷》"],
};
},
};
</script>
二.具名插槽 (多个插槽)
vue3已弃用该方法
将元素放入插槽
template 不会出现在结构中
子:
<template>
<div class="category">
<h3>{
{ title }}分类</h3>
<!-- 插槽 -->
<slot name="cent">我是默认值, 使用者没有传递具体结构时, 显示</slot>
<slot name="foot">我是默认值, 使用者没有传递具体结构时, 显示</slot>
</div>
</template>
父:
<template>
<div class="container">
<ACategory title="美食">
<!-- 将图片放入插槽 -->
<img slot="cent" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" />
<a slot="foot" href="https://blog.csdn.net/weixin_46372074/article/details/124738994">更多美食</a>
</ACategory>
</div>
</template>
vue3支持<template v-slot:slotName>
小结:
1.在组件中的用<slot>给插槽占位, 用name属性给插槽命名
2.然后再组件标签内,用<template v-slot:slotName>使用指定插槽
3.v-slot可以用#代替
子:
<template>
<div class="category">
<h3>{
{ title }}分类</h3>
<!-- 插槽 -->
<slot name="cent">我是默认值, 使用者没有传递具体结构时, 显示</slot>
<slot name="foot">我是默认值, 使用者没有传递具体结构时, 显示</slot>
</div>
</template>
<script>
export default {
props: ["title"],
};
</script>
父:
<template>
<div class="container">
<ACategory title="美食">
<!-- 将图片放入插槽 -->
<template v-slot:cent>
<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" />
</template>
<template v-slot:foot>
<a href="https://blog.csdn.net/weixin_46372074/article/details/124738994">
更多美食
</a>
</template>
</ACategory>
<ACategory title="游戏">
<!-- 将列表放入插槽 -->
<template v-slot:cent>
<ul>
<li v-for="(item, index) in games" :key="index">{
{ item }}</li>
</ul>
</template>
<template v-slot:foot>
<div class="gameType">
<a href="https://blog.csdn.net/weixin_46372074/article/details/124738994">
单机游戏
</a>
<a href="https://blog.csdn.net/weixin_46372074/article/details/124738994">
网络游戏
</a>
</div>
</template>
</ACategory>
<ACategory title="电影">
<!-- 将视频放入插槽 -->
<template v-slot:cent>
<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
你的浏览器不支持video标签!
</video>
</template>
<template v-slot:foot>
<h4>欢迎前来观影</h4>
</template>
</ACategory>
</div>
</template>
vue3的作用域插槽
子:
数据在子组件内
<template>
<div class="category">
<h3>{
{ title }}分类</h3>
<!-- 插槽 -->
<slot name="cent" :games="games"
>我是默认值, 使用者没有传递具体结构时, 显示
</slot>
<!-- <slot name="cent">我是默认值, 使用者没有传递具体结构时, 显示</slot> -->
</div>
</template>
<script>
export default {
props: ["title"],
data() {
return {
games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
};
},
};
</script>
父:
1.v-slot可以用#代替
2.#name=“组件传过来的值转换成的对象”, 可以用{}包含起来, 这样可以直接用
<template>
<div class="container">
<ACategory title="游戏">
<!-- 将列表放入插槽 -->
<template #cent="games">
<ul>
<li v-for="(item, index) in games.games" :key="index">{
{ item }}</li>
</ul>
</template>
</ACategory>
<ACategory title="游戏">
<!-- 将列表放入插槽 -->
<template #cent="{ games }">
<ul>
<li v-for="(item, index) in games" :key="index">{
{ item }}</li>
</ul>
</template>
</ACategory>
</div>
</template>
总结
