Vue中使用插槽
文章目录不使用插槽默认插槽具名插槽作用域插槽插槽的作用是,让父组件可以向子组件指定位置插入html结构。下面会依次介绍:默认插槽具名插槽作用域插槽。数据在组件本身,但根据数据生成的结构需要组件的使用者决定。不使用插槽看具体项目吧。组件Category.vue<template><div class="category"><h3>{{title}}分类</h
·
插槽的作用是,让父组件可以向子组件指定位置插入html结构。
下面会依次介绍:
- 默认插槽
- 具名插槽
- 作用域插槽。数据在组件本身,但根据数据生成的结构需要组件的使用者决定。
不使用插槽
看具体项目吧。
- 组件Category.vue
<template>
<div class="category">
<h3>{{title}}分类</h3>
<ul>
<li v-for="(item,index) in listData" :key="index">{{item}}</li>
</ul>
</div>
</template>
<script>
export default {
name:"Category",
props:["listData","title"]
}
</script>
<style>
.category{
background: skyblue;
width: 200px;
height: 300px;
}
.category h3{
background: orange;
text-align: center;
}
</style>
- 组件App.vue
<template>
<div class="container">
<Category title="美食" :listData="foods"/>
<Category title="游戏" :listData="games"/>
<Category title="电影" :listData="films"/>
</div>
</template>
<script>
import Category from './components/Category.vue'
export default {
name: 'App',
data(){
return {
foods:["火锅","烧烤","湘菜","杭帮菜"],
games:["王者荣耀","魔兽世界","原神","魂斗罗"],
films:["穿条纹睡衣的男孩","祈祷落幕时","哈利波特","金刚狼"]
}
},
components: {
Category
}
}
</script>
<style>
.container{
display: flex;
justify-content: space-around;
}
</style>
- 入口文件main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
- 启动应用,测试效果。
默认插槽
看具体项目吧。
- 组件Category.vue
<template>
<div class="category">
<h3>{{title}}分类</h3>
<slot>我是默认值,当使用者没有传入具体结构时,我将出现</slot>
</div>
</template>
<script>
export default {
name:"Category",
props:["title"]
}
</script>
<style>
.category{
background: skyblue;
width: 200px;
height: 300px;
}
.category h3{
background: orange;
text-align: center;
}
</style>
- 组件App.vue
<template>
<div class="container">
<Category title="美食">
<img src="./assets/images/火锅.jpg" alt="火锅">
</Category>
<Category title="游戏">
<ul>
<li v-for="(game,index) in games" :key="index">{{game}}</li>
</ul>
</Category>
<Category title="电影">
<video src="./assets/videos/穿条纹睡衣的男孩预告片.mp4" controls></video>
</Category>
<Category title="默认"></Category>
</div>
</template>
<script>
import Category from './components/Category.vue'
export default {
name: 'App',
data(){
return {
games:["王者荣耀","魔兽世界","原神","魂斗罗"]
}
},
components: {
Category
}
}
</script>
<style>
.container{
display: flex;
justify-content: space-around;
}
.container img{
width: 100%;
}
.container video{
width: 100%;
}
</style>
- 入口文件main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
- 启动应用,测试效果。
具名插槽
- 组件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: skyblue;
width: 200px;
height: 300px;
}
.category h3{
background: orange;
text-align: center;
}
</style>
- 组件App.vue
<template>
<div class="container">
<Category title="美食">
<img slot="center" src="./assets/images/火锅.jpg" alt="火锅">
<a slot="footer" href="http://www.baidu.com" >更多美食</a>
</Category>
<Category title="游戏">
<ul slot="center">
<li v-for="(game,index) in games" :key="index">{{game}}</li>
</ul>
<div slot="footer" class="box">
<a href="http://www.huawei.com">单机游戏</a>
<a href="http://www.tencent.com">网络游戏</a>
</div>
</Category>
<Category title="电影">
<video slot="center" src="./assets/videos/穿条纹睡衣的男孩预告片.mp4" controls></video>
<!-- <template slot="footer">
<a href="https://www.bytedance.com/">更多电影</a>
<h4><a href="https://movie.douban.com/">点击进入观影</a></h4>
</template> -->
<!-- <template v-slot:footer>
<a href="https://www.bytedance.com/">更多电影</a>
<h4><a href="https://movie.douban.com/">点击进入观影</a></h4>
</template> -->
<template #footer>
<a href="https://www.bytedance.com/">更多电影</a>
<h4><a href="https://movie.douban.com/">点击进入观影</a></h4>
</template>
</Category>
</div>
</template>
<script>
import Category from './components/Category.vue'
export default {
name: 'App',
data(){
return {
games:["王者荣耀","魔兽世界","原神","魂斗罗"]
}
},
components: {
Category
}
}
</script>
<style>
.container{
display: flex;
justify-content: space-around;
}
.container img{
width: 100%;
}
.container video{
width: 100%;
}
.container .box{
display: flex;
justify-content: space-around;
}
.container h4{
text-align: center;
}
</style>
- 入口文件main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
- 启动应用,测试效果
作用域插槽
数据在组件本身,但根据数据生成的结构由组件的使用者决定。
本例中,数据games在Category.vue中,但根据games生成ul、ol还是h4结构,由组件的使用者App.vue决定。
- 组件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: skyblue;
width: 200px;
height: 300px;
}
.category h3{
background: orange;
text-align: center;
}
</style>
- 组件App.vue
<template>
<div class="container">
<Category title="游戏">
<template slot-scope="dataObj">
<ul>
<li v-for="(game,index) in dataObj.games" :key="index">
{{game}}
</li>
</ul>
</template>
</Category>
<Category title="游戏">
<template slot-scope="{games}">
<ol>
<li v-for="(game,index) in games" :key="index">
{{game}}
</li>
</ol>
</template>
</Category>
<Category title="游戏">
<template slot-scope="{games}">
<h4 v-for="(game,index) in games" :key="index">
{{game}}
</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from './components/Category.vue'
export default {
name: 'App',
components: {
Category
}
}
</script>
<style>
.container{
display: flex;
justify-content: space-around;
}
.container h4{
text-align: center;
}
</style>
- 入口文件main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
- 重启应用,测试效果
关于插槽,【vue】slot也曾介绍过。
更多推荐
已为社区贡献19条内容
所有评论(0)