Vue组件插槽的使用

1. 什么是插槽

插槽的作用: 让封装的组件更加具有扩展性

插槽就是子组件提供给父组件使用的一个占位符，用 <slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如：html、组件等，填充的内容会替换到子组件中的 <slot></slot> 标签

2. 基础使用

<div id="app">    <parent>        12323    </parent></div><script>    var par = {        template: `<div>hello <slot></slot></div>`    }    let vm = new Vue({        el: '#app',        components: {            parent: par        }    })</script>

3. 具名插槽

v-slot: 可以简写为 #

<div id="app">    <layout>        <template v-slot:header>            123        </template>        <template #main>            456        </template>        <template #footer>            789        </template>    </layout></div><script>    var layout = {        template: `            <div>hello                 <header>                    <slot name="header"></slot>                </header>                <main>                    <slot name="main"></slot>                </main>                <footer>                    <slot name="footer"></slot>                </footer>            </div>        `    }    let vm = new Vue({        el: '#app',        components: {            layout: layout        }    })</script>