vue--day67--作用域插槽

标签：Category vue width -- 100% 作用域

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>    

标签：Category,vue,width,--,100%,作用域
From： https://www.cnblogs.com/satisfysmy/p/17652943.html