一、匿名插槽（单插槽）

1. 在父组件中

<Children>
    <div>hello world</div>
    <div>hello world</div>
</Children>

2. 在子组件中，使用 slot 标签定义插槽位置
   slot 标签内的值是插槽无内容时的默认值，当插槽有内容时会被替换掉

<slot>no data</slot>

二、具名插槽（多插槽）

1. 在父组件中，通过 v-slot 指令指定插槽名称
   default 为默认插槽，在子组件中可以通过 name 指定插槽位置，也可以去掉 name 属性

<Children>
    <template v-slot:title>
        <h2>具名插槽</h2>
    </template>
    <template v-slot:default>
        <h2>默认的具名插槽</h2>
    </template>
</Children>

2. 在子组件中，设置插槽的显示出口

<slot name="title">no data</slot>

<!-- 默认插槽的两种写法 -->
<slot name="default">no data defalut</slot>
<slot>no data defalut</slot>

三、作用域插槽

在父组件的作用域插槽中可以使用插槽出口所在的子组件中的 data 和 methods

1. 在父组件的作用域插槽中，接收来自子组件暴露的参数，可以说 data，也可以是 methods

<template>
    <div>
        <h1>App</h1>
        <Children>
            <!-- 具名插槽 -->
            <template v-slot:title>
                <h2>{{ titleValue }}</h2>
            </template>

            <!-- 作用域插槽 -->
            <template v-slot:titleScope="{ titleScopeValue, changeTitleScopeValue }">
                <h2>{{ titleScopeValue }}</h2>
                <h2 @click="changeTitleScopeValue">{{ titleScopeValue }}</h2>
            </template>
        </Children>
    </div>
</template>

<script>
import Children from '@/components/Children.vue';
export default {
    components: {
        Children,
    },
    data() {
        return {
            titleValue: '具名插槽',
        };
    },
};
</script>

2. 在子组件中通过 <slot> 给父组件传递暴露的 data 和 methods

<template>
    <div>
        <hr />
        <h1>Children</h1>
        <slot name="title">no data</slot>
        <slot name="titleScope" :titleScopeValue="titleScopeValue" :changeTitleScopeValue="changeTitleScopeValue">no scope data</slot>
    </div>
</template>

<script>
export default {
    data() {
        return {
            titleScopeValue: '作用域插槽 data',
        };
    },
    methods: {
        changeTitleScopeValue() {
            this.titleScopeValue = '作用域插槽 methods';
        },
    },
};
</script>

<style lang="scss" scoped></style>