子组件代码：
<template>
<div class="tc-button" :class="btnClass">
<slot></slot>
</div>
</template>
<script setup>
/* 声明 start */
const props = defineProps({
btnClass: {
type: String,
default: '',
},
});
const {btnClass} = props
/* 声明 end */
</script>
<style>
.tc-button {
display: inline-flex;
justify-content: center;
align-items: center;
text-decoration: none;
white-space: nowrap;
border-radius: 8rpx;
box-sizing: border-box;
font-size: 100rpx;
}
.tc-button {
border: none;
}
.tc-button.large {
width: 335rpx;
height: 88rpx;
font-size: 32rpx;
line-height: 48rpx;
font-weight: bold;
}
.tc-button.large.round {
border-radius: 44rpx;
}
.tc-button.medium {
padding: 0 32rpx;
height: 68rpx;
font-size: 28rpx;
line-height: 68rpx;
}
.tc-button.medium.round {
border-radius: 34rpx;
}
.tc-button.small {
padding: 0 28rpx;
min-width: 112rpx;
height: 56rpx;
line-height: 56rpx;
font-size: 24rpx;
}
.tc-button.small.round {
border-radius: 28rpx;
}
.tc-button.mini {
padding: 0 20rpx;
height: 44rpx;
font-size: 20rpx;
line-height: 44rpx;
}
.tc-button.mini.round {
border-radius: 22rpx;
}
.tc-button.primary {
color: #333333;
background-color: #ffd850;
}
</style>父组件引用方式：
<tc-button btnClass="primary small">{{title}}</tc-button>
专业逮虾户aaa (作者)
有考虑过这种可能，我也使用option的写法尝试过了，在created的时候是能够正常打印的，但是还是会有一样的问题哈~
<template>
<div class="tc-button" :class="btnClass">
<slot></slot>
</div>
</template>
<script>
export default {
props: {
btnClass: {
type: String,
default: ''
}
},
created() {
console.log(this.btnClass);
}
};
</script>
2024-03-05 12:30
YUANRJ
回复 专业逮虾户aaa:我这边使用options方式测试是可以的
2024-03-07 10:49
专业逮虾户aaa (作者)
回复 YUANRJ: 方便发一下测试项目或代码片段嘛？
2024-03-07 11:28
YUANRJ
回复 专业逮虾户aaa: 就是用的你的代码
2024-03-07 13:15
专业逮虾户aaa (作者)
回复 YUANRJ: 我觉得可能是之前定义的样式不明显，闪的太快了，没感受到vue2和vue3版本渲染区别。我重新上传了一份整个demo项目的代码在评论区~
2024-03-08 09:50