Vue中slot插槽的使用

Vue slot插槽

组件的插槽：
让封装的组件更加具有扩展性。可以根据条件决定设置内容。
将共性抽取到组件中，将不同暴露为插槽。

• 插槽的基本使用

1. 在定义子组件模板时，设置插槽<slot></slot>
2. 在Vue实例中，在子组件标签内添加对应标签，放入插槽内

Note1: 如果有公共样式，可以在子组件模板内设置默认标签样式，如<slot><button></button></slot>；在Vue实例中使用时，如果不新增则使用默认标签，反之则替换默认的标签内容。


Note2: 在Vue实例中，如果有多个值同时放入到组件内进行替换时，会一起作为替换元素。

//子组件HTML模板
    <template id="temp">
        <div>
            <h2>我是子组件</h2>
            <slot></slot>
        </div>
    </template>
 //Vue实例
     <div id="app">
        <cpn>
            <span>我是插槽</span>
        </cpn>
    </div>

• 具名插槽的使用

1. 在定义子组件模板时，给slot标签添加name属性
2. 在Vue实例中，添加标签时指出对应的具名插槽，以独立封装

//子组件HTML模板
    <template id="temp">
        <div>
            <h2>我是子组件</h2>
            <slot name="left"><span>左边</span></slot>
            <slot name="center"><span>中间</span></slot>
            <slot name="right"><span>右边</span></slot>
            <slot>哈哈哈</slot>
        </div>
    </template>
    // Vue实例
        <div id="app">
        <cpn>
            <!-- 不指定具名插槽的话就会替换默认的插槽，其他的不会替换 -->
            <i>呵呵呵</i>
            <span slot="center">替换中间内容</span>
        </cpn>
    </div>