category
英[ˈkætəɡəri] 美[ˈkætəɡɔːri]
n. 类别;(人或事物的)种类;

笔记

插槽：是子组件里预留的「插座孔」，让父组件可以把任意内容「插」进去显示。
默认插槽： 就是只有一个插槽。

重要文件源码

App.vue

<template>
    <div class="container">

        <Category title="美食">
            <!-- 由于此时是在 App.vue 组件中，所以当前模板解析完成之后，才放到了 Category组件中。 
                 那么想控制img样式，就可以在当前组件写样式。
             -->
            <img src="https://imgchr.com/content/images/system/home_cover_1601010270144_8921bc.jpg" alt="">
        </Category>

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

        <Category title="电影">
            <!-- controls 播放 -->
            <video controls src="https://cdn.pixabay.com/video/2022/11/03/137614-767056227_large.mp4"></video>
        </Category>
    </div>
</template>

<script>
    //1. 引入组件
    import Category from './components/Category.vue'



    export default {
        name:'App',
        //2. 注册组件
        components: { Category },

        data(){
            return{
                foods: ['火锅', '烧烤', '小龙虾', '牛排'],
                games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
                films: ['《教父》', '《拆弹专家》', '《你好，李焕英》', '《尚硅谷》'],
            }
        }

    }
</script>


<style>
    .container{
        display: flex;
        justify-content: space-around;
    }

    img{
        width: 100%;
    }
    video{
        width: 100%;
    }
</style>

components\Category.vue

<template>
    <div class="category">
        <h3>{{ title }} 分类</h3>
        <!-- 定义一个插槽(挖个坑，等着组件的使用者进行填充)-->
        <slot>我是一个默认值，当使用者没有传递具体结构时，我会出现</slot>
    </div>
</template>

<script>
    export default {
        name:'CategoryVue',

        props:[title']
    }
</script>

<style>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }

    h3{
        text-align: center;
        background-color: orange;
    }
    /*
    img{
        width: 100%;
    }
    */
</style>