Vue3 插槽使用

如果一个组件需要用到不同的插槽，那就需要使用具名插槽

<form class="validata-form-container">
        //不署名的slot是默认插槽渲染位置
        <slot></slot>
        <div class="submit-area">
          //这个地方是留给叫submit的slot用的，不传就会渲染里面默认内容
            <slot name="submit">
                <button type="submit" class="btn btn-primary">提交</button>
            </slot>
        </div>
    </form>

//父组件使用这个子组件
 <validate-form action="">
          //这里是默认slot位置
            <div class="mb-3">
                <label class="form-label">邮箱地址</label>
                <validate-input :rules="emailRules" v-model="emailVal" placeholder="请在输入邮箱"
                                type="text"></validate-input>
                {{emailVal}}
            </div>
          //#submit是v-slot:submit的缩写，表示这里面的内容就是submit插槽的内容
            <template #submit>
                <span class="btn btn-danger">提交</span>
            </template>
        </validate-form>

slot数据传递

slot可以在定义的时候绑定当前组件实例里的数据，然后组件在使用时就可以用这个数据。比如上传组件有一个slot在上传成功时展示，我们希望展示内容是用户上传的内容，就可以通过slot把这个数据传过去：

//上传组件实例这边有用户上传的内容数据，通过:uploadedData="uploadedData"绑定这个数据
<template>
    <div class="file-upload">
        <div >
            <slot name="uploaded" :uploadedData="uploadedData"></slot>
        </div>
    </div>
</template>

//其他地方调用上传组件：#uploaded="dataProps"代表这是具名插槽uploaded的内容，并且带有数据，通过xxx.uploadedData就可以拿到数据
<Uploader action="/upload" :beforeUpload="beforeUpload" @file-uploaded="onFileUploaded">
    <button class="btn btn-primary">点击上传</button>
    <template #uploaded="xxx">
    <img :src="xxx.uploadedData.data.url" width="500">
            </template>
</Uploader>