Vue学习笔记-插槽基本使用

为了让我们的组件更加具有扩展性，可以使用插槽

<div id="app">
    <cpn>
        <span>返回</span>
        <input type="text" placeholder="搜索">
        <span>...</span>
    </cpn>
</div>

<template id="cpn">
    <div style="display: flex;flex-direction: row">
        <h2>左边</h2>
        <h2>中间</h2>
        <h2>右边</h2>
        <slot></slot>
        <!--默认插槽: 当没有替换内容时默认显示-->
        <slot><button>按钮</button></slot>
        <!--<slot></slot>-->
        <!--<slot></slot>-->
    </div>

</template>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const cpn = {
        template: '#cpn'
    }
    const app = new Vue({
        el: '#app',
        components: {
            cpn
        }
    })
</script>

具名插槽：

当子组件的功能复杂时，子组件的插槽可能并非是一个。
比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
这个时候，我们就需要给插槽起一个名字
如何使用具名插槽呢？
非常简单，只要给slot元素一个name属性即可

<div id="app">
    <!--没有传入内容默认-->
    <cpn></cpn>
    <!--传入一个-->
    <cpn>
        <span slot="left">返回</span>
    </cpn>
    <!--传入全部-->
    <cpn>
        <span solt="letf">我是返回</span>
        <input type="text" slot="center">
        <span slot="right">...</span>
    </cpn>
</div>

<template id="cpn">
    <div style="display: flex;flex-direction: row">
        <slot name="left">左侧</slot>
        <slot name="center">中间</slot>
        <slot name="right">右侧</slot>
    </div>

</template>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const cpn = {
        template: '#cpn'
    }
    const app = new Vue({
        el: '#app',
        components: {
            cpn
        }
    })
</script>