Vue默认插槽,具名插槽,作用域插槽定义及使用方法

<template>
    <Child> <!-- Child为子组件标签 -->
        <!-- 插槽内容 -->
        <template>要插入的html内容</template>
    </Child>
</template>

<template>
    <div>
        <!-- 插槽位置 -->
        <slot>插槽未被调用时会显示此内容</slot>
    </div>
</template>

<template>
    <Child> <!-- Child为子组件标签 -->
        <!-- 插槽内容 -->
        <template slot="header">要插入的html内容1</template>
        <template slot="center">要插入的html内容2</template>
        <template slot="footer">要插入的html内容3</template>
    </Child>
</template>

<template>
    <div>
        <!-- 插槽位置 -->
        <slot name="header">插槽未被调用时会显示此内容</slot>
        <slot name="center">插槽未被调用时会显示此内容</slot>
        <slot name="footer">插槽未被调用时会显示此内容</slot>
    </div>
</template>

<template>
    <Child> <!-- Child为子组件标签 -->
        <!-- 插槽内容 -->
        <template slot="header">
            <span v-for="m in data.msg" :key="m"></span>
        </template>
        <template slot="center">
            <div v-for="m in data.msg" :key="m"></div>
        </template>
        <template slot="footer">
            <label v-for="m in data.msg" :key="m"></label>
        </template>
    </Child>
</template>

<template>
    <div>
        <!-- 插槽位置 -->
        <slot :msg="msg">插槽未被调用时会显示此内容</slot>
    </div>
</template>

<script>
    export default {
        name: 'Child',
        // 公用数据
        data() {
            return {
                msg: ["火锅", "红烧肉", "烤羊腿"]
            }
        }
    }
</script>