Vue13-插槽
1.插槽简介
- 插槽可以让父组件向子组件中指定位置插入HTML结构。是一种组件间通信的方式，适用于父组件到子组件的通信。
- 插槽可以分为默认插槽、具名插槽和作用域插槽。
2.默认插槽
- 父组件中设置插槽的数据。
<template>
<div class="container">
<!--
1 父组件中Category中的内容img是在父组件完成解析后被设置到Category组件中slot位置。
2 父组件中有样式，则会携带样式放在插槽的位置。
3 父组件中如果img有样式，则会将img和img携带样式一起放到插槽的位置。
4 如果样式在插槽所在的组件，则父组件解析完放入插槽后，样式依然有用。
5 如果父组件和插槽slot所在组件定义了相同的样式，则使用插槽slot所在组件的样式。
-->
<Category title="美食" :listData="this.foods">
<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
</Category>
<Category title="游戏" :listData="this.games">
<ul>
<li v-for="(game,index) in games" :key="index">{{game}}</li>
</ul>
</Category>
<Category title="电影" :listData="this.films">
<!-- controls控制显示电影的播放按钮。 -->
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>
</Category>
<category></category>
</div>
</template>
<script>
import Category from "./components/Category";
export default {
name: "App",
data() {
return {
foods:['火锅','烧烤','小龙虾','牛排'],
games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
films:['《教父》','《拆弹专家》','《你好，李焕英》']
}
},
components: {Category}
}
</script>
<style>
.container {
display: flex;
justify-content: space-around;
}
img {
width: 100%;
}
video {
width: 100px;
}
</style>
- 子组件中使用slot标签定义插槽。
<template>
<div class="category">
<h2>{{title}}分类</h2>
<!-- 定义一个插槽 -->
<slot>定义一个插槽，当组件的使用者没有传递具体的数据时，显示这段文字。</slot>
</div>
</template>
<script>
export default {
name: "Category",
props: ['listData', 'title']
}
</script>
<style scoped>
.category {
background-color: skyblue;
width: 200px;
height: 300px;
}
h2 {
text-align: center;
background-color: orange;
}
video {
width: 100%;
}
</style>
3.具名插槽
- 子组件中定义多个插槽，通过name给插槽slot定义名称。
- 父组件中通过slot="xxx"指定标签放入子组件的插槽。
- 父组件想要将多个元素放入到一个插槽，可以使用template将多个元素包裹。
- 父组件中设置插入的数据。
<template>
<div class="container">
<Category title="美食" :listData="this.foods">
<!-- slot="center"，将img标签放入到子组件name="center"插槽。 -->
<img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
<a slot="footer" href="www.baidu.com">更多美食</a>
</Category>
<Category title="游戏" :listData="this.games">
<ul slot="center">
<li v-for="(game,index) in games" :key="index">{{game}}</li>
</ul>
<div class="foot" slot="footer">
<a href="www.baidu.com">网络游戏</a>
<a href="www.baidu.com">单机游戏</a>
</div>
</Category>
<Category title="电影" :listData="this.films">
<video slot="center" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>
<!-- 当有多个结构都需要放在一个插槽时，可以使用template将这些结构包裹。
使用div包裹也可以，但是div会被解析为真实的DOM元素，而template不会被解析为真实的DOM元素。
使用template标签后，具名插槽有两种使用方式。
slot="footer"
v-slot:footer
-->
<template v-slot:footer>
<div class="foot" >
<a href="www.baidu.com">经典</a>
<a href="www.baidu.com">热门</a>
<a href="www.baidu.com">推荐</a>
</div>
<h4>更多电影</h4>
</template>
</Category>
<category></category>
</div>
</template>
<script>
import Category from "./components/Category";
export default {
name: "App",
data() {
return {
foods:['火锅','烧烤','小龙虾','牛排'],
games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
}
},
components: {Category}
}
</script>
<style>
.container,.foot {
display: flex;
justify-content: space-around;
}
h4 {
text-align: center;
}
img {
width: 100%;
}
video {
width: 100px;
}
</style>
- 子组件中定义插槽。
<template>
<div class="category">
<h2>{{title}}分类</h2>
<!-- 定义一个插槽 -->
<slot name="center">定义一个插槽，当组件的使用者没有传递具体的数据时，显示这段文字。</slot>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
name: "Category",
props: ['listData', 'title']
}
</script>
<style scoped>
.category {
background-color: skyblue;
width: 200px;
height: 300px;
}
h2 {
text-align: center;
background-color: orange;
}
video {
width: 100%;
}
</style>
4.作用域插槽
- 作用域插槽可以将插槽中的数据传递给插槽的使用者。
- 插槽的使用者接受到的数据是一个对象，因为插槽可以传递多个数据。
<!-- 子组件中通过:games="games"将数据传递给插槽的使用者。插槽接受到的数据是一个
对象，对象的key是传递时的:games，对象的形式为{'games': xxx, 'xxx': xxx}
-->
<slot :games="games"></slot>
- 插槽的使用要接受到插槽的数据必须使用template标签。
- 父组件中接受插槽slot传递的数据。
<template>
<div class="container">
<Category title="游戏">
<template scope="data">
<ul>
<li v-for="(game,index) in data.games" :key="index">{{game}}</li>
</ul>
{{data.message}}
</template>
</Category>
<Category title="游戏">
<!-- {games}或者数据是ES6新语法 -->
<template scope="{games}">
<ol>
<li v-for="(game,index) in games" :key="index">{{game}}</li>
</ol>
</template>
</Category>
<Category title="游戏">
<!-- vue新版本使用slot-scope接受数据。 -->
<template slot-scope="{games}">
<h4 v-for="(game,index) in games" :key="index">{{game}}</h4> <br>
</template>
</Category>
</div>
</template>
<script>
import Category from "./components/Category";
export default {
name: "App",
components: {Category}
}
</script>
<style>
.container,.foot {
display: flex;
justify-content: space-around;
}
h4 {
text-align: center;
}
</style>
- 子组件通过插槽slot给父组件传递数据。
<template>
<div class="category">
<h2>{{title}}分类</h2>
<!-- 定义一个插槽 -->
<slot :games="games" message="hello">定义一个插槽，当组件的使用者没有传递具体的数据时，显示这段文字。</slot>
</div>
</template>
<script>
export default {
name: "Category",
data() {
return {
games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
}
},
props: ['listData', 'title']
}
</script>
<style scoped>
.category {
background-color: skyblue;
width: 200px;
height: 300px;
}
h2 {
text-align: center;
background-color: orange;
}
</style>
浙公网安备 33010602011771号