在 Vue 3 中，v-bind?是一個(gè)核心指令，用于動(dòng)態(tài)綁定 HTML 屬性或組件的 props 到 Vue 實(shí)例的數(shù)據(jù)。以下是詳細(xì)講解：

一、基礎(chǔ)用法

1. 綁定單個(gè)屬性

vue

復(fù)制

下載

<template><!-- 綁定 img 的 src 屬性 --><img v-bind:src="imageUrl"><!-- 簡(jiǎn)寫形式（推薦） --><img :src="imageUrl">
</template><script setup>
import { ref } from 'vue';
const imageUrl = ref('https://example.com/image.jpg');
</script>

2. 綁定多個(gè)屬性（對(duì)象語法）

vue

復(fù)制

下載

<template><div v-bind="attrsObject"></div>
</template><script setup>
import { reactive } from 'vue';
const attrsObject = reactive({id: 'container',class: 'main-box','data-info': 'vue3'
});
</script>

渲染結(jié)果：

html

復(fù)制

下載

運(yùn)行

<div id="container" class="main-box" data-info="vue3"></div>

二、特殊場(chǎng)景用法

1. 動(dòng)態(tài)綁定屬性名

vue

復(fù)制

下載

<template><button :[dynamicAttr]="value">按鈕</button>
</template><script setup>
import { ref } from 'vue';
const dynamicAttr = ref('title');
const value = ref('提示信息');
</script>

渲染結(jié)果：

html

復(fù)制

下載

運(yùn)行

<button title="提示信息">按鈕</button>

2. 綁定 class

vue

復(fù)制

下載

<template><!-- 對(duì)象語法 --><div :class="{ active: isActive, 'text-danger': hasError }"></div><!-- 數(shù)組語法 --><div :class="[activeClass, errorClass]"></div>
</template><script setup>
import { ref } from 'vue';
const isActive = ref(true);
const hasError = ref(false);
const activeClass = ref('active');
const errorClass = ref('text-danger');
</script>

3. 綁定 style

vue

復(fù)制

下載

<template><!-- 對(duì)象語法（駝峰或短橫線） --><div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div><!-- 數(shù)組語法（合并多個(gè)對(duì)象） --><div :style="[baseStyles, overridingStyles]"></div>
</template><script setup>
import { reactive } from 'vue';
const textColor = ref('red');
const fontSize = ref(16);
const baseStyles = reactive({ padding: '10px' });
const overridingStyles = reactive({ margin: '20px' });
</script>

三、組件 Prop 綁定

vue

復(fù)制

下載

<template><!-- 傳遞靜態(tài)值 --><ChildComponent title="靜態(tài)標(biāo)題" /><!-- 動(dòng)態(tài)綁定 prop --><ChildComponent :title="dynamicTitle" /><!-- 綁定整個(gè)對(duì)象 --><ChildComponent v-bind="componentProps" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';
import { ref, reactive } from 'vue';const dynamicTitle = ref('動(dòng)態(tài)標(biāo)題');
const componentProps = reactive({title: '對(duì)象綁定標(biāo)題',content: '內(nèi)容文本'
});
</script>

四、修飾符

1.?.camel?- 將屬性名轉(zhuǎn)為駝峰式

vue

復(fù)制

下載

<svg :view-box.camel="viewBox"></svg>
<!-- 渲染為 viewBox（而非 view-box） -->

2.?.prop?- 強(qiáng)制綁定為 DOM property

vue

復(fù)制

下載

<div :text-content.prop="text"></div>
<!-- 綁定為 element.textContent 而非 HTML 特性 -->

五、注意事項(xiàng)

1. 避免與靜態(tài)屬性混用
   動(dòng)態(tài)綁定的屬性會(huì)覆蓋靜態(tài)屬性：

   vue

   復(fù)制

   下載

   <div id="static" :id="dynamicId"></div>
   <!-- 最終 id 值為 dynamicId -->

2. 布爾屬性特殊處理
   當(dāng)綁定值為?null、undefined?或?false?時(shí)，屬性會(huì)被移除：

   vue

   復(fù)制

   下載

   <button :disabled="isDisabled">按鈕</button>
   <!-- 當(dāng) isDisabled=false 時(shí)，disabled 屬性不渲染 -->

3. 性能優(yōu)化
   對(duì)大量靜態(tài)內(nèi)容使用?v-bind?會(huì)增加運(yùn)行時(shí)開銷，建議靜態(tài)內(nèi)容直接寫屬性值。

六、總結(jié)

通過靈活運(yùn)用?v-bind，可以高效實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)視圖的動(dòng)態(tài)更新，是 Vue 響應(yīng)式系統(tǒng)的核心功能之一。

v-bind="$attrs" 用法講解

在 Vue 3 中，v-bind="$attrs"?是一個(gè)非常重要的特性，它用于處理組件間的屬性透?jìng)?/strong>。讓我詳細(xì)解釋它的含義和用法：

<child-component v-bind="$attrs"></child-component>

<!-- Parent.vue -->
<template><ChildComponent title="父組件標(biāo)題" data-id="123" @custom-event="handleEvent"class="parent-class"/>
</template><!-- ChildComponent.vue -->
<template><div><!-- 將未聲明的屬性透?jìng)鹘o孫子組件 --><GrandChild v-bind="$attrs" /></div>
</template><script setup>
// 只聲明了 title 作為 prop
defineProps(['title'])
</script><!-- GrandChild.vue -->
<template><div><!-- 將接收到的屬性綁定到根元素 --><div v-bind="$attrs">孫子組件</div></div>
</template>

<script setup>
defineOptions({inheritAttrs: false // 禁用默認(rèn)的屬性繼承
})
</script><template><div class="wrapper"><!-- 手動(dòng)控制屬性綁定位置 --><input v-bind="$attrs" /></div>
</template>

<script setup>
import { useAttrs } from 'vue'const attrs = useAttrs()
console.log(attrs) // 包含所有未聲明屬性
</script>

<template><div><input v-bind="filteredAttrs"></div>
</template><script setup>
import { computed, useAttrs } from 'vue'const attrs = useAttrs()const filteredAttrs = computed(() => {const { class: _, style: __, ...rest } = attrsreturn rest
})
</script>