插槽和插槽传递数据

需要注意的几个点：

1. 插槽其实就是将预留的slot口占上，可以写默认值
2. 匿名插槽其实也有名字的，叫做<slot name="default"></slot>
3. 具名插槽在使用的时候一定要加<template>标签<template #header="obj">
4. <template #header="obj">这个#是简写
5. 可以动态更换插槽名字，这个也不难，用的并不多
6. 以后使用最多的还是匿名插槽

contents的代码：

---

<template>
    <div>
        
        <!-- 1.匿名插槽 -->
        <!-- <slot name="default"></slot> -->
        <h1>我就是插槽里的内容 怎么了？</h1>

        <!-- 2.具名插槽 -->
        <slot name="header" :msg="msg" :age="age"></slot>
        <h3>Lorem ipsum dolor sit amet.</h3>
        <slot name="footer"></slot>
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:"这就是传过去的数据",
            age:669,

        }
    }
}
</script>

<style>

</style>

parent的代码：

---

<template>
    <div>
        <h3>我是插槽</h3>
        <contents>

            <!-- <template v-slot:header="obj"> -->
            <template #header="obj">
                接收内容：{{ obj }}
                <p>msg:{{ obj.msg }}</p>
                age:{{ obj.age }}
                <div style="color:red">
                    替换掉slot标签🏷Lorem ipsum dolor sit amet consectetur adipisicing elit.
                </div>
            </template>
            <template v-slot:footer>
                <div style="color:red">
                    替换掉slot标签🏷Lorem ipsum dolor sit amet consectetur adipisicing elit.
                </div>
            </template>
            
        </contents>
    </div>
</template>

<script>
import contents from './contents.vue';
export default {
    components: {
        contents,
    },
}
</script>

<style>

</style>