Vue之组件分发

当写Vue项目的时候，会把所有的组件进行拆分，根据需求来引入对应的组件，也就是模块化开发。
1、模板定义插槽

<template id="headers">
    <!-- 模板里面定义插槽，只能有一个外部元素-->
    <div>
        <div style="border:2px solid green;width:70%;">
            <slot name="header">
                <p>这个插槽 只能接收header 的 内容.... </p>
                <!-- 插槽默认值 -->
            </slot>
        </div>
        <div style="border:2px solid green;width:70%">
            <slot name="main">
                <p>这个插槽 只能接收 footer 的 内容.... </p>
            </slot>
        </div>
        <div style="border:2px solid green;width:70%">
            <slot name="footer">
                <p>这个插槽 只能接收 footer 的 内容.... </p>
            </slot>
        </div>
    </div>
</template>

2、模板使用

<div id="box">
    <headers>
        <!-- 使用的时候直接使用模板template v-slot:插槽的name -->
        <template v-slot:header>       		//只能放在对应的插槽内
            <h1>Here might be a page title</h1>            
        </template>
        <template v-slot:main>
            <h1>Here might be a page title</h1>            
        </template>
        <template v-slot:footer>
            <h1>Here might be a page title</h1>            
        </template>
    </headers>
</div>

3、组件注册

 <script>
   Vue.component("headers", {
        template: "#headers",
    })

    const vm = new Vue({
        el: "#box",
        data: {
            title: "vue  组件 组件分发 slot (插槽)",
        },
        methods: {

        },
        mounted() {
            document.head.title.innerHTML = this.title;
        }
    })
</script>