vue.js 插槽使用

 插槽基础用法：

子组件：

<template>
    <div>
        <slot name="mySlot">此处可添加默认值，若父组件未使用此插槽，则使用此默认值</slot>
    </div>
</template>

父组件：

<template>
    <div class="parent_box">
        <children-com>
            /* 若不指定name，则父组件可写为v-slot:default ==> v-slot（简写） */
            <template v-slot:mySlot>
                <div>此模板字符串中添加的内容，将渲染至该子组件中</div>
            </template>
        </children-com>
    </div>
</template>

注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确；只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法；详情：独占默认插槽的缩写语法。

 

父组件调用子组件参数（插槽 prop）：

子组件：

<template>
    <div>
        /* chil_id、chil_title为子组件作用域内的参数 */
        <slot name="mySlot"
            :id="chil_id"
            :title="chil_title">
        </slot>
    </div>
</template>

父组件：

<template>
    <div class="parent_box">
        <children-com>
            /* chil为自定义变量，可使用解构方式代替变量 */
            <template v-slot:mySlot="chil">
                <div>{{chil.title}}</div>
            </template>
        </children-com>
    </div>
</template>

官网示例： 作用域插槽 、解构插槽-Prop