插槽

slot

内容分发 单个插槽

除非子组件模板包含至少一个 插口，否则父组件的内容将会被丢弃 最初在 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容

子组件

< 6666 ... 父组件

//如果此时子组件里面没有slot这个插口的话，父组件里面的b标签将会被丢弃。
<my-header>
    <b>标题</b>
</my-header>

当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。 子组件

<header>
    <span><</span>
    <slot>6666</slot>
    <span>...</span>
</header>

父组件

//整个ul都会替换掉插槽标签本身
<my-header>
   <ul>
        <li></li>
   </ul>
</my-header>

具名插槽

元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素

子组件

<slot name="插槽名"></slot>

父组件

<template v-slot:插槽名>
<!-- 同一组件出现多个个slot需要使用template -->
<button></button> //html结构
               
</template>

具名插槽不仅仅只能用在