vue--day65--默认卡槽

1. App.vue

<template>

<div class="container">

<Category title="美食" >

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

</Category>

<Category title="游戏" >

<ul>

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

</ul>

</Category>

<Category title="电影">

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

</Category>

</div>

 

 

</template>

 

<script>

import Category from './components/Category.vue';

export default {

name: 'App',

components:{

Category

},

data(){

return{

foods:['火锅','烧烤','小龙虾','牛排'],

games:['红色警戒','劲舞团','穿越火线','超级玛丽'],

films:['教父','拆弹专家','你好李焕英','小李飞刀']

}

}

}

</script>

<style>

.container{

display: flex;

justify-content: space-around;

}

video{

width:100%

}

img{

width:100%

}

</style>

 

 2. Category.vue

<template>

<div class="category">

<h3>{{title}}分类</h3>

<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->

<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</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>