vue3中的v-bind in CSS原理

vue3中的v-bind in CSS的基本情况

概念

首先，说明一下 指令v-bind 和 v-bind in CSS是两个不同的概念，点击链接可以看官网详细的解释，以下是我的理解：

前者是用在template模板中，用来动态绑定参数的内置指令，一般我们用的是:简写。

而后者是用在style标签中，来获取在script中定义css属性值的变量，即我们能够在style标签中引入动态的css变量了。

注意，v-bind in css 是vue3新提出的属性，vue2并没有

使用

以组合式的写法为例，在script标签中定义变量，在style标签中通过v-bind(变量名)，就可将css属性值动态设置了

<script setup>
    const color = 'skyblue'
</script>

<template>
    <div>
        <p>hello</p>
    </div>
</template>

<style scoped>
p {
  color: v-bind(color);
}
</style>

vue2该怎么做

讲原理之前，先讲一下，在vue3的v-bind()出现前，vue2要想实现这这一功能是该怎么做的

核心var()

核心在于var()函数，注意区别于声明变量的关键字var。

这是一个css函数，在style标签中使用。可以插入一个自定义属性的值，用来代替非自定义属性中值的任何部分。

var()的用法示例

1. 根元素上设置：

// 在根元素上定义样式 
:root { 
    --main-bg-color: pink; 
} 

// 其他元素就能使用了，这里就相当于给body的background-color设为pink 
body { 
    background-color: var(--main-bg-color); 
}

注意： var()接收两个参数，第一个是定义名，必须以 -- 开头。第二个是后备值，即定义函数不存在时，将取后备值生效，如下的var(--header-color, blue)

2. 也可在父元素上定义，子元素上使用。

/* 在父元素样式中定义一个值 */
.component {
  --text-color: #080;
}

/* 在 component 的子元素中使用它： */
.component .text {
  color: var(--text-color, black); /* 此处 color 正常取值 --text-color */
}
.component .header {
  color: var(--header-color, blue); /* header-color 没有被设置，将使用回退值 blue */
}

在vue2中可以这么做

在data定义变量color，然后在template模板中，该组件根标签设置style属性对象，定义属性名为css变量名--test-color，属性值为color。这样在style标签中就可以通过var函数传入css变量名--test-color，获得css变量了。

<template> 
    <div class="test" :style='{"--test-color":color}'></div> 
</template> 

<script> 
export default { 
    data() { 
        return { 
            color:'red'
        } 
    }, 
} 
</script> 

<style scoped> 
.test{ 
    width: 100px; 
    height: 100px; 
    background-color: var(--test-color,yellow); 
} 
</style>

原理

下图就是上面例子中vue3使用 v-bind() in css 元素检查器的截图

可以看到，在使用v-bind in css后，vue3自动在组件根标签生成了--7a7a37b1-color自定义属性，值为我们定义的skyblue，然后在p标签上通过var()函数传入--7a7a37b1-color获取到我们定义的变量。

这就和上面在vue2中的做法一致，只不过在vue3中我们不用手动定义自定义属性到根标签，且不用var()函数。这些都是vue3内部做的，在使用v-bind()后，vue3内部将定义的变量名x生成 --hash值-x自定义属性，设置到根标签style中，然后在v-bind的部分实际上是使用var()传入生成的 --hash值-x自定义属性。可以说v-bind()是vue3出的语法糖。

扩展

上面说的核心var()函数插入自定义属性（也称为css变量），在element-plus中有大量使用，文档有说明其使用css 变量来重构了几乎所有组件的样式系统。

所以在使用element-plus的项目中，我们可以看到在:root中定义了大量的css变量

在实际开发中，有这样一个功能，用户通过颜色选择器修改主题颜色。当我们使用的是element-plus作为UI库时，可以这么做：在主题颜色选择器change事件中，获取到想要修改的主题颜色属性，然后进行相应赋值即可。

const htmlEl = document.documentElement;
const handleThemeColorChange = (color) => {
  getComputedStyle(htmlEl).getPropertyValue(`--el-color-primary`); 
  htmlEl.style.setProperty("--el-color-primary", color); 
};