Vue3自定义组件slots设置默认值

在Vue3自定义组件slots中，介绍了如何使用slot为自定义组件插入内容，这里介绍如何设置slot的默认值：

下面为案例：
1、在自定义组件的slot中间，加入默认的内容，可以是变量、文字和html标签：

<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>

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