vue组件之插槽

slot自定义内容

vue自定义组件时，使用的组件为双标签，但当双标签内部写html内容时却不会显示，只有当定义组件时使用slot标签才会显示

匿名插槽

当组件中slot标签没有name属性时为匿名标签，此时组件内部的html内容会取代组件中slot标签的内容，slot定义时候可以在里面写html内容作为默认html结构

<div id ="app">
        <cpn>
            <h1>我是匿名插槽的标题</h1>
            <p>我是匿名插槽的内容</p>
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <slot></slot>
        </div>
    </template>

上图为渲染效果
如果有多个匿名插槽会同时改变html结构，所以匿名插槽建议只用一个

具名插槽

在实际开发中会需要改多个插槽的内容，此时需要用具名插槽

<div id ="app">
        <cpn>
            <span slot="left">我是左边</span>    
            <span slot="middle">我是中间</span>
            <span slot="right">我是右边</span>    
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <slot name="left"><span>hello</span></slot>
            <slot name="middle">middle</slot>
            <slot name="right"><span>world</span></slot>
        </div>
    </template>

组件中的slot用name属性，对应cpn中的slot属性,当不使用slot属性的结构不会影响有name属性的插槽