vue3 中的 v-bind ,竟然有这么多用处 快来看看你用过几种吧

1、动态绑定

相信刚学vue的小伙伴最熟悉 v-bind 的就是下面这样的用法：

<div :id="dynamicDom"> hi，这是v-bind 的简写方式哦</div>

const dynamicDom = ref(null)

:id 是v-bind:id 的简写形式

布尔型的属性 用 true / false 值来决定 属性 是否存在于该元素上。disabled 就是最常见的例子之一。

v-bind 在这种时候是不同的：

<button :disabled="isDisabled">Button</button>

当 isDisabled 为真值或一个空字符串时，元素会包含这个 disabled 属性。而当其为其他假值时 disabled属性 将被忽略。

2、动态绑定多个值

<div v-bind="dynamicBind"><div>

const dynamicBind = reactive({
    id:'divDom',
    class:'title'
})

此时上面的这种绑定方式，会将 dynamicBind 对象展开,将里面的key作为属性，value作为值（<div id="divDom" class="title"></div>）。 这种功能在父子组件传递props时，也很适用。

3、组件封装

在我们工作中，经常要根据自己的需要，对组件进行封装。例如你想封装一个Element-UI的dialog组件。你希望自己的组件上支持所有el-dialog组件的属性、事件。当然你不能一个个的把el-dialog的属性和事件全部都写一遍。

<template>
  <section>
    <div></div>
    <el-dialog v-bind="$attrs"> </el-dialog>
  </section>
</template>
<script lang="ts" setup>
defineOptions({
  inheritAttrs: false
});
</script>

这时候，你在用组件时，在组件上设置的属性和事件将直接继承到el-dialog上，便可以很流畅的使用 el-dialog的属性和事件了。如果此时el-dialog组件是作为根组件，则会自动继承——链接Vue3透传

4、动态css 之 v-bind

有时我们需要在 css 中使用 js 中的变量，用于动态修改样式（这只是其中一种方法），这时可以像下面这样使用

<template>
  <div class="text">123</div>
</template>

<script lang="ts" setup>
const divColor = ref("red");
</script>

<style lang="less" scoped>
.text {
  color: v-bind(divColor);
}
</style>

这个div就会使用到 divColor 的颜色值，并在 值改变时，响应式的改变。