首页 > 建站教程 > 前端框架 >  Vue3自定义组件slots设置默认值正文

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>