vue--day66--具名插槽

1.App.vue

<template>

<div class="container">

<Category title="美食" >

<img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">

<a slot="footer" href="http:www.atguigu.com">更多美食</a>

</Category>

<Category title="游戏" >

<ul slot="center">

<li v-for="(g,index) in games" :key="index">{{g}}</li>

</ul>

<div class="foot" slot="footer">

<a href="http:www.atguigu.com">单机游戏</a>

<a href="http:www.atguigu.com">网络游戏</a>

</div>

 

</Category>

<Category title="电影">

<video controls slot="center" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>

<!-- <template>

<div class="foot" slot="footer">

<a href="http:www.atguigu.com">经典</a>

<a href="http:www.atguigu.com">热门</a>

<a href="http:www.atguigu.com">推荐</a>

</div>

<h4>欢迎学习</h4>

</template> -->

<!--新写法 只适用于template-->

<template v-slot:footer>

<div class="foot">

<a href="http:www.atguigu.com">经典</a>

<a href="http:www.atguigu.com">热门</a>

<a href="http:www.atguigu.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>

.container,.foot{

display: flex;

justify-content: space-around;

}

h4{

text-align: center;

}

video{

width:100%

}

img{

width:100%

}

</style>

 

 2. 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 scoped>

.category{

background-color: skyblue;

width: 200px;

height: 300px;

}

h3{

text-align: center;

background-color: orange;

}

video{

width: 100%;

}

img{

width: 100%;

}

</style>