vue插槽的使用

插槽的功能

• 插槽是为了使设备具有扩展性，而组件中的插槽同样是为了使组件具有扩展性

插槽的使用方式

• 抽取共性，保留不同
  • 将共性抽取到组件中，将不同暴露为插槽
  • 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容

插槽的基本使用

• 使用特殊标签<slot></slot>即可设置一个插槽

<div>
    <h2>我是组件</h2>
    <h3>我也是组件</h3>
    <slot></slot>

• 往组件中插入内容，该内容即就会在插槽中显示
• 如果一次性插入多条内容，这些内容会全部在插槽位置显示

<cpn><button>按钮</button></cpn>
<cpn><input type="text">文本框</cpn>
<cpn>
    <h3>哈哈</h3>
    <p>嘿嘿</p>
    <a href="#">嘻嘻</a>
</cpn>

• 插槽也可以有默认值。当在插槽中没有插入内容时，插槽位置就会显示默认值

<slot><button>默认值</button></slot>

<!-- 未往插槽插入内容时，默认显示一个按钮 -->
<cpn></cpn>

具名插槽

​ 当子组件功能较为复杂时，子组件的插槽可能并非只有一个。如一个导航栏，可能就需要三个插槽，分别表示左边、中间、右边，那么在外面给插槽插入内容时，如何区分插槽是哪一个呢，此时就需要为插槽起一个名字

• 通过为特殊标签slot绑定一个属性name即为命名插槽

<slot name="left"><span>左边</span></slot>
<slot name="middle"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>

• 往指定插槽插入内容 -> slot="插槽的name值"

<cpn><input type="search" slot="middle" />搜索框</cpn>

作用域插槽

• 使用子组件的任何数据，来达到自定义显示内容的目的
• 父组件替换子组件插槽的标签，但是内容由子组件提供使用slot-scope实现，将这个属性绑定到template模板中

<cpn>
    <!-- 作用域插槽，使用slot-scope实现，将这个属性绑定到子组件的template中 -->
    <template slot-scope='slota'>
        <!-- datate即为PLanguages数组，遍历该数组 -->
        <span v-for="item in slota.datate">{{item}} /</span>
    </template>
</cpn>

<template id="cpn">
    <div>
        <!-- 将plangues数组动态绑定给datate -->
        <slot :datate="pLanguages">
            <ul>
                <li v-for="item in pLanguages">{{item}}</li>
            </ul>
        </slot>