今天来学习一个新的组件间通信的方式:插槽,它适用于父组件===>子组建
插槽一共分为三类:默认插槽、具名插槽、作用域插槽
默认插槽:
### Category.vue
<template>
<div class="category">
<h3>{{ title }}分类</h3>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'Category',
props: ['title'],
}
</script>
<style>
.category {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: orange;
}
</style>
### App.vue
<template>
<div class="company">
<Category title="美食">
<img src="https://s3.ax1x.com/2021/01/16/srJ1q0.jpg" alt="">
</Category>
<Category title="游戏">
<ul>
<li v-for="(item,index) in games" :key="index">{{item}}</li>
</ul>
</Category>
<Category title="电影">
<video controls
src="https://baike.baidu.com/item/%E5%9C%A8%E7%BA%BF%E7%94%B5%E5%BD%B1/5218404?fr=aladdin"></video>
</Category>
</div>
</template>
<script>
import Category from './components/Category.vue'
export default {
name: 'App',
components: { Category },
data() {
return {
foods: ['火锅', '烧烤', '牛排', '小龙虾'],
games: ['地下城与勇士', '英雄联盟', '穿越火线', '劲舞团'],
films: ['《阿凡达》', '《第一滴血》', '《龙虎门》', '《导火线》'],
}
},
}
</script>
<style>
.company {
display: flex;
justify-content: space-around;
}
img {
width: 100%;
}
video {
width: 100%;
}
</style>
具名插槽:
### Category.vue
<template>
<div class="category">
<h3>{{ title }}分类</h3>
<slot name="center">没有信息就显示默认吧</slot>
<slot name="footer">没有信息就显示默认吧</slot>
</div>
</template>
<script>
export default {
name: 'Category',
props: ['title'],
}
</script>
<style>
.category {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: orange;
}
</style>
### App.vue
<template>
<div class="company">
<Category title="美食">
<img slot="center" src="https://s3.ax1x.com/2021/01/16/srJ1q0.jpg" alt="">
<a slot="footer" href="www.badu.com">百度一下</a>
</Category>
<Category title="游戏">
<ul slot="center">
<li v-for="(item,index) in games" :key="index">{{item}}</li>
</ul>
</Category>
<Category title="电影">
<video slot="center" controls
src="https://baike.baidu.com/item/%E5%9C%A8%E7%BA%BF%E7%94%B5%E5%BD%B1/5218404?fr=aladdin"></video>
<template v-slot:footer>
<div class="foot">
<a href="www.badu.com">经典</a>
<a href="www.badu.com">热门</a>
<a href="www.badu.com">推荐</a>
</div>
<h4>欢迎大家来观影</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from './components/Category.vue'
export default {
name: 'App',
components: { Category },
data() {
return {
foods: ['火锅', '烧烤', '牛排', '小龙虾'],
games: ['地下城与勇士', '英雄联盟', '穿越火线', '劲舞团'],
films: ['《阿凡达》', '《第一滴血》', '《龙虎门》', '《导火线》'],
}
},
}
</script>
<style>
.company,
.foot {
display: flex;
justify-content: space-around;
}
img {
width: 100%;
}
video {
width: 100%;
}
h4 {
text-align: center;
}
</style>
作用域插槽:
### Category.vue
<template>
<div class="category">
<h3>{{ title }}分类</h3>
<slot :games="games">没有信息就显示默认吧</slot>
</div>
</template>
<script>
export default {
name: 'Category',
props: ['title'],
data() {
return {
games: ['地下城与勇士', '英雄联盟', '穿越火线', '劲舞团'],
}
},
}
</script>
<style>
.category {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: orange;
}
</style>
### App.vue
<template>
<div class="company">
<Category title="游戏">
<template scope="data">
<ul>
<li v-for="(item,index) in data.games" :key="index">{{item}}</li>
</ul>
</template>
</Category>
<Category title="游戏">
<template scope="{games}">
<ol>
<li v-for="(item,index) in games" :key="index">{{item}}</li>
</ol>
</template>
</Category>
<Category title="游戏">
<template slot-scope={games}>
<h4 v-for="(item,index) in games" :key="index">{{item}}</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from './components/Category.vue'
export default {
name: 'App',
components: { Category },
}
</script>
<style>
.company,
.foot {
display: flex;
justify-content: space-around;
}
img {
width: 100%;
}
video {
width: 100%;
}
h4 {
text-align: center;
}
</style>
插槽的学习只有纯纯的撸代码,理论知识不多
我是空谷有来人,谢谢支持!