Vue3+TypeScript学习笔记（十一）

1. 插槽分为匿名插槽、具名插槽、作用域插槽和动态插槽。其中作用域插槽分为匿名作用域插槽和具名作用域插槽
2. 插槽v-slot和v-bind类似，都有:和=两个操作符。v-slot的:用于绑定具名插槽，而=则用于接收作用域插槽传来的信息
3. 作用域插槽建议使用解构赋值去掉外层变量，可以省去一部分操作
4. 插槽如果没有name属性则父组件的template标签中的属性默认为#default，对于作用域插槽可以这样写：#default="defaultProps"

举个例子：

<!-- App.vue -->
<template>
  <A>
    <template v-slot={data}>    //相当于let {data} = {data:{name:'航航',age:18}}
      {{ data }}    //{name:'航航',age:18}
      如果不解构将会变为：{data:{name:'航航',age:18}}    (相当于在外部又套了一层匿名对象)
    </template>
  </A>
</template>
<script setup lang="ts">
  import A from './components/A.vue'
</script>


<!-- A.vue -->
<template>
    <slot data1="data"></slot>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const data = reactive({
    name: '航航',
    age: 18,
})
</script>

1. v-slot:的简写为#，可以代替大部分使用v-slot的场合。包括匿名作用域插槽也可以用#default={}来获取数据
2. 动态插槽语法：#[name]，其中name是一个在脚本中维护的变量。通过修改name变量可以将组件动态渲染到特定具名插槽

完整代码：
App.vue

<template>
    <A>
        <!-- 匿名插槽 -->
        <div>我被插入了</div>
    </A>
    <hr />
    <B>
        <!-- 具名插槽(两种写法) -->
        <template v-slot:header>
            <div>我被插入了header</div>
        </template>
        <template #default>
            <div>我被插入了default</div>
        </template>

        <!-- 动态插槽 -->
        <template #[name]>
            <div>我被动态插入了footer</div>
        </template>
    </B>
    <hr />
    <C>
        <!-- 匿名作用域插槽 -->
        <template v-slot="{ data1 }">
            <div>{{ data1 }}</div>
        </template>

        <!-- 具名作用域插槽 -->
        <template #mock="{ data2 }">
            <div>{{ data2 }}</div>
        </template>
    </C>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'

let name = ref('footer')
</script>

<style scoped></style>

A.vue

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

<script setup lang='ts'>
import { ref,reactive } from 'vue'

</script>

<style scoped>

</style>

B.vue

<template>
    <slot name="header"></slot>
    <slot name="default"></slot>
    <slot name="footer"></slot>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'

</script>

<style scoped>

</style>

C.vue

<template>
    <slot :data1="data1"></slot>
    <slot name="mock" :data2="data2"></slot>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const data1 = reactive({
    name: '小满',
    age: 20,
})

const data2 = reactive({
    name: '小航',
    age: 16,
})
</script>

<style scoped></style>