分享一个一分钟就学会的vue小技巧（真的一看就会～～）

1、内容简介

在使用vue开发时，常常会封装不少的组件方便复用，那么不免就有写样式相关组件，好比须要使用时传入颜色、高度等样式参数。那么问题来了：咱们要怎么在样式中使用组件中接收的参数呢？或者说，咱们要怎么在样式中使用data中的变量呢？

2、代码演示

这个用法真的简单，没什么其余的知识点，直接上代码：

<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()获取咱们在行内设置的数据便可。

3、最后

之后，在封装一些须要动态传入样式参数的ui组件是否是简便了很多。你学会了么？赶快在项目中尝试一下吧～～