vue--day67--作用域插槽

1. App.vue

 

<template>

<div class="container">

 

<Category title="游戏" >

<template scope="atgui">

<ul >

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

</ul>

</template>

 

 

</Category>

<Category title="游戏" >

<!--结构赋值-->

<template scope="{games}">

<ol >

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

</ol>

</template>

</Category>

<Category title="游戏" >

<template scope="{games}">

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

</template>

</Category>

 

 

 

</div>

 

 

</template>

 

<script>

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

export default {

name: 'App',

components:{

Category

},

 

}

</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 :games="games">我是默认的一些内容</slot>

 

 

</div>

</template>

<script>

export default {

name:'Category',

props:['title'],

data(){

return{

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

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

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

}

}

}

</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>