Vue组件间传参（4）---插槽分发

通过使用vue提供的 元素可以给组件传递内容。

一、默认插槽

子组件children.vue

<template>
    <div>
        <slot></slot>
    </div>
</template>

父组件parent.vue

<template>
    <div>
        <p>父组件</p>
        <child>
            父组件传递的内容，也可使用花括号语法
        </child>
    </div>
</template>

二、具名插槽

如果存在多个独立内容要分发，可以使用具名插槽。具名插槽在使用时，需要用template标签包裹起来

父组件parent.vue

<template>
    <div>
        <p>父组件</p>
        <child>
            // 默认插槽实际上是个语法糖，它的name是default
            <template>
                默认插槽内容
            </template>
            // 具名插槽 可使用v-slot指定名称，也可使用#来指定
            <template v-slot:text>   // #text
                具名插槽内容
            </tempalte>
        </child>
    </div>
</template>

子组件children.vue

<template>
    <div>
        // 接收默认插槽的内容
        <slot></slot>
        // 接收指定名称的内容
        <slot name="text"></slot>
        // 插槽可以设置默认值，如父级没有传入内容，则使用默认值
        // <slot name="text">默认text</slot>
    </div>
    
</template>

三、作用域插槽

有时我们使用插槽时，某些数据是从子组件中获得的，此时可以使用作用域插槽。

父组件parent.vue

<template>
    <div>
        <p>父组件</p>
        <child>
            <template v-slot:text="slotProps">
                <h3>
                    {{slotProps.title}}   // 来自子组件的文本数据
                </h3>
            </tempalte>
        </child>
    </div>
</template>

子组件children.vue

<template>
    <div>
        <slot name="text" title="来自子组件的文本数据">默认文本</slot>
    </div>
</template>