Vue3自定义组件slots

Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口，在调用组件时，可以在组件的标签中间插入文字、html内容或变量。

下面为案例：
1、自定义一个按钮组件

<template>
<button class="btn-primary">
    <slot></slot>
</button>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.btn-primary {
    padding: 5px 10px;
    background: orange;
    color: #fff;
    border: none;
}
</style>

2、调用这个组件

<v-button class="btn-primary">登录</v-button>

slot还允许在自定义组件里面传入任意的html标签,或者其他组件

<v-button class="btn-primary">
    <i>Icon</i> 登录
</v-button>

slot中还可以绑定父组件的数据

<v-button class="btn-primary">
    <i>Icon</i> 登录
    {{title}}
</v-button>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！