插槽（slot）

默认插槽、具名插槽、作用域插槽 的基本使用与传值

插槽：使用 slot 标签,预留一个不确定内容的区域，将来会把自定义的内容填充到预留的区域

作用：让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式

1. 默认插槽

默认插槽：没有 name 属性的插槽，插槽的默认名称为 default

2. 具名插槽

具名插槽：声明多个插槽时，应该为每一个插槽起一个名称

子组件：声明具名插槽 <slot name="插槽名称"></slot>
父组件：定义内容 <template v-slot:left>自定义内容</template>

v-slot（插槽指令）的作用：把内容填充到指定名称的插槽中
注意：v-slot 插槽指令，只能用在 template 身上，template 只是起到包裹的作用
简写：v-slot: 可以简写为 #（如：v-slot:left 简写为 #left）

3. 作用域插槽

作用域插槽：带有数据/自定义属性的插槽，称为"作用域插槽"

子组件：通过 插槽绑定数据 传递给父组件，传递的数据是一个对象（子向父传值）
父组件：接收 具名插槽 传递过来的数据(是一个对象)，我们可以直接使用这个对象
注意：子组件在给插槽绑定数据的时候，既可以写固定的值，也可以用 v-bind 动态的绑定值

总结

子组件：声明一个插槽，预留一个不确定内容的区域（将来自定义的内容会填充到这个区域）

<template>
    <div class="box-right">
        <h3>Right 组件</h3>
        <!-- 1. 默认插槽：没有 name 属性的插槽,插槽的默认名称为 default -->
        <slot>将来自定义的内容会填充到这个区域</slot>
        
        <!-- 2. 具名插槽：带 name 属性的插槽,称为"具名插槽",name属性的值,也就是插槽名称 -->
        <slot name="title">标题</slot>
        <slot name="content">内容</slot>
        
        <!-- 3. 作用域插槽：带有数据/自定义属性的插槽,称为"作用域插槽" -->
        <slot name="foot" uname="纳兰性德" :years="userinfo">作者信息</slot>
        <!--
		作用域插槽的作用：
        	子组件 可以通过 插槽绑定数据 传递给父组件,传递的数据是一个对象（子向父传值）
        	在给插槽绑定数据的时候,既可以写固定的值,也可以用 v-bind 动态的绑定值
		-->
</template>

<script>
export default {
    data() {
        return {
            // 作者信息对象
            userinfo: {
                age: "清"
            }
        }
    }
}
</script>

父组件：把内容填充到指定名称的插槽中

<template>
    <div class="app-conuainer">
        <div class="box">
            <!--
                v-slot 插槽指令：把内容填充到指定名称的插槽中
                    (1). v-slot: 简写为 #
                    (2). 只能用在 template 身上,template只是起到包裹的作用
                    (3). v-slot:后面的值对应的是 <slot name="">标签中 name属性的值,也就是插槽名称
            -->
            <Right>
                <template v-slot:title>
                    <h3>木兰花·拟古决绝词柬友</h3>
                </template>
                <template #content>
                    <p>人生若只如初见，</p>
                    <p>何事秋风悲画扇。</p>
                    <p>等闲变却故人心，</p>
                    <p>却道故人心易变。</p>
                </template>
                <!--  
                    作用域插槽：v-slot:插槽名称="对象名"（对象名是任意的,相当于形参,建议取名为scope）
                        用于接收 具名插槽 传递过来的数据(是一个对象),我们可以直接使用这个对象
                -->
                <template v-slot:foot="scope">
                    <span>作者：{{ scope.uname }} ----- 朝代：{{ scope.years.age }}</span>
                </template>
                <!-- 作用域插槽的解构赋值 -->
                <!-- <template #foot="{uname, years}">
                    <span>作者：{{ uname }} ----- 朝代：{{ years.age }}</span>
                </template> -->
            </Right>
        </div>
    </div>
</template>