vue3 slot 具名插槽

一、情景

一个组件用多个子组件，子组件样式相同

二、作用

父组件传递数据和格式给子组件

三、语法

1、子组件(挖坑)

<slot name="title">默认标题</slot>
<slot name="content">默认内容</slot>

2、父组件(填坑)

用语法糖 #

<Category>
    <template #title>
        <h2>汽车品牌</h2>
    </template>

    <template #content>
        <ul>
            <li v-for="car in carList" :key="car.id">{{ car.name }}</li>
        </ul>
    </template>
</Category>

三、案例

1、子组件

<template>
    <div class="category">
        <slot name="title">默认标题</slot>
        <slot name="content">默认内容</slot>
    </div>
</template>

<script setup lang="ts" name="Category">

</script>

2、父组件

<template>
    <div class="app">
        <Category>
            <template #title>
                <h2>汽车品牌</h2>
            </template>

            <template #content>
                <ul>
                    <li v-for="car in carList" :key="car.id">{{ car.name }}</li>
                </ul>
            </template>
        </Category>
        <Category>
            <template #title>
                <h2>美食图片</h2>
            </template>
            <template #content>
                <img :src="img" alt="">
            </template>
        </Category>
    </div>

</template>

<script setup lang="ts" name="App">
import { reactive, ref } from 'vue';
import Category from './components/Category.vue';
let carList = reactive([
    {id:'01', name:"小米"},
    {id:'02', name:'奔驰'},
    {id:"03", name:"马自达"}
])

let img = ref("https://lrwhjt.com/skin/img/56.jpg")
</script>