slot插槽

匿名槽口：

<div id="app">
    <aaa>
        哈哈哈
    </aaa>
</div>
<template id="aaa">
    <div>
        <h1>我是a组件</h1>
        <!-- slot就是在组件声明的时候预留给外界嵌入内容的槽口 -->
        <slot></slot>
    </div>
</template>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    Vue.component("aaa",{
        template:"#aaa",
    })
    new Vue({
        el:"#app",
    })
</script>

匿名槽口：

<div id="app">
    <aaa>
        <p slot="s2">s2</p>
        <p slot="s1">s1</p>
    </aaa>
</div>
<template id="aaa">
    <div>
        <slot name="s2"></slot>
        <h1>我是a组件</h1>
        <!-- slot就是在组件声明的时候预留给外界嵌入内容的槽口 -->
        <slot name="s1"></slot>
    </div>
</template>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    Vue.component("aaa",{
        template:"#aaa",
    })
    new Vue({
        el:"#app",
    })
</script>