一、内容简介
在使用vue开发时，经常会封装很多的组件方便复用，那么难免就有写样式相关组件，比如需要使用时传入颜色、高度等样式参数。那么问题来了：我们要怎么在样式中使用组件中接收的参数呢？或者说，我们要怎么在样式中使用data中的变量呢？
二、代码演示
这个用法真的简单，没什么其他的知识点，直接上代码：
<template>
<div class="box" :style="styleVar"> </div>
</template>
<script> export default { props: { height: { type: Number, default: 54, }, }, computed: { styleVar() { return { '--box-height': this.height + 'px' } } }, } </script>
<style scoped> .box { height: var(--box-height); } </style>
这样我们就在vue中实现了在样式里使用js变量的方法：
及通过css定义变量的方式，将变量在行内注入，然后在style中使用var()获取我们在行内设置的数据即可。
三、最后
以后，在封装一些需要动态传入样式参数的ui组件是不是简便了不少。你学会了么？赶快在项目中尝试一下吧～～
今天的文章分享一个一分钟就学会的vue小技巧（真的一看就会～～）分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/15416.html
