Vue3 在SCSS中使用v-bind

template

先创建一个通用的页面结构

<template><div class="v-bubble-bg"></div>
</template>

js

在JS中先对需要用的数据进行定义：
可以是参数，也可以是data

<script setup>const props = defineProps({bgColor: {type: String,default: '#000000'},bgWidth: {type: [Number, String],default: '100%'},bgHeight: {type: [Number, String],default: '100%'},color: {type: String,default: 'rgba(255,255,255,.6)'}})const pdata = reactive({size: '12px'})
</script>

css

<style lang="scss" scoped>.v-bubble-bg {background-color: v-bind(bgColor);width: v-bind(bgWidth);height: v-bind(bgHeight);overflow: hidden;position: absolute;left: 0;top: 0;font-size:v-bind('pdata.size')}
</style>

运行结果

运行结果