vue组件中的slot插槽功能

简单示例：

父组件代码片段

<com-a :my-value="myVal" @my-event="getMyEvent">
    <p>123</p>
    //父组件页面的子组件标签中写入需要插入到子组件的内容
</com-a>

子组件代码片段

<template>
    <div>
        <button @click="emitMyEvent">emit</button>
        <slot></slot>//写上插槽标签
    </div>
</template>

当没有插槽内容时，可以自定义默认插槽内容：

写在子组件的代码片段

<template>
    <div>
        <button @click="emitMyEvent">emit</button>
        <slot>no slot</slot> //当父组件内没有写插槽内容时，就会显示no slot
    </div>
</template>

具名slot

子组件代码片段：

<template>
    <div>
        <button @click="emitMyEvent">emit</button>
        <slot name="header">no header</slot>
        <p>123</p>
        <slot name="footer">no footer</slot>
    </div>
</template>

父组件代码片段

<com-a :my-value="myVal" @my-event="getMyEvent">
    <p slot="header">啦啦啦啦 header</p>
    <p slot="header">啦啦啦啦 footer</p>
</com-a>

应用场景：dialog 等。。。