vue3.0 封装button使用slot组件

最新推荐文章于 2025-06-10 21:41:44 发布

原创

最新推荐文章于 2025-06-10 21:41:44 发布 · 4.8k 阅读

3 ·

CC 4.0 BY-SA版权

为了实现同一按钮在不同页面中仅文字内容变化的需求，本文档详细介绍了如何在Vue3.0中封装一个Button组件，并通过使用Slot来动态传入不同的文字，例如‘登录’和‘注册’。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求: 同一个button在不同页面使用,只有文字不一样;有的内容为登录有的为注册

下面我们自封一个button组件

子组件:

<template>
<!-- :type="type" 为按钮类型 :disabled="disabled" 为判断他为false还是ture  
    {'is-disabled':disabled} 如果为true就可以有is-disabled的样式
    @click="$emit('click')" 传入一个cklick点击事件
-->
    <button 
        class="y-button"    
        :class="{'is-disabled':disabled}"
        :type="type"
        :disabled="disabled"
        @click="$emit('click')"
    >
        <slot>
            <!-- 这是一个插槽在父组件中可以放入登录或都注册的文本字段 -->
        </slot>
    </button>
</template>
<script>
export default {
    name:'ybutton',
    props:{//传值去到父组件 
        type:String,
        disable:{//传值类型,默认值为false
            type:Boolean,
            default:false
        }
    }
}
</script>
<style scoped>
/* 获取焦点的时候和hover的时候改变颜色 */
.is-disabled:focus,
.is-disabled:hover{
    background: blue;
    color:white;

}
<