关于javascript:vue插槽理解

什么是插槽

插槽就是子组件提供给父组件的一个占位符, 应用 <slot></slot> 示意, 父组件能够在这个占位符里填充任何模板代码, 比方 html 组件等, 填充的内容会替换子组件里的 slot 标签
子组件

<template>
    <div>
    <p> 今天天气 </p>
    <slot></slot>
    </div>
</template>

父组件

<div>
    <p> 应用 slot 散发内容 </p>
    <SlotChild> 天气真不错 </SlotChild>
</div>

如果子组件没有应用插槽，父组件如果须要往子组件中填充模板或者 html, 是没法做到的

具名插槽

具名插槽就是给插槽取个名字, 一个子组件能够应用多个插槽, 而且放在不同中央, 父组件填充内容时, 能够依据这个名字, 将内容填充到对应内容中

<template>
    <div>
        <div>
            <h1> 我是页头 </h1>
            <slot name="header"></slot>
        </div>
        <div>
            <h1> 我是页尾 </h1>
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<div>
    <SlotChild>
        <template v-slot:header>
            <h1> 展现页头相干内容 </h1>
        </template>
        <template v-slot:footer>
            <h1> 展现页尾相干内容 </h1>
        </template>
    </SlotChild>
</div>

默认插槽

默认插槽就是指没有名字的插槽, 子组件未定义的名字的插槽，父级将会把 未指定插槽的填充的内容填充到默认插槽中。

<div>
    <div>
        <h1> 我是页头 </h1>
        <slot name="header"></slot>
    </div>
    <div>
        <h1> 我是未定义插槽 </h1>
        <slot></slot>
    </div>
    <div>
        <h1> 我是页尾 </h1>
        <slot name="footer"></slot>
    </div>
</div>

<div>
    <SlotChild>
        <template v-slot:header>
            <h1> 展现页头相干内容 </h1>
        </template>
        <template>
            <h1> 未定义名字插槽 </h1>
        </template>
        <template v-slot:footer>
            <h1> 展现页尾相干内容 </h1>
        </template>
    </SlotChild>
</div>

留神

1.  父级的填充内容如果指定到子组件的没有对应名字插槽，那么该内容 不会 被填充到默认插槽中。
2.  如果子组件没有默认插槽，而父级的填充内容指定到默认插槽中，那么该内容就“不会 ”填充到子组件的任何一个插槽中。
3.  如果子组件有多个默认插槽，而父组件所有指定到默认插槽的填充内容，将“ 会”“全都”填充到子组件的每个默认插槽中。