默认插槽 ＜slot＞

main.js

//引入Vue

import Vue from 'vue'

//引入App

import App from './App.vue'

//引入插件

import vueResource from 'vue-resource'

//关闭Vue的生产提示

Vue.config.productionTip = false

//使用插件

Vue.use(vueResource)

//创建vm

new Vue({

    el:'#app',

    render: h => h(App),

    beforeCreate() {

        Vue.prototype.$bus = this

    }

})

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'

    export default {

        name:'App',

        components:{Category},

        data() {

            return {

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

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

                films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']

            }

        },

    }

</script>

<style scoped>

    .container{

        display: flex;

        justify-content: space-around;

    }

</style>

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>