在 Vue 3 和 TypeScript 中，屬性透傳（attr pass-through）是指將組件的屬性傳遞到其根元素或某個子元素中。這個概念在開發(fā)可復(fù)用的組件時非常有用，尤其是當(dāng)你希望將父組件的屬性動態(tài)地傳遞給子組件的某個 DOM 元素時。

在 Vue 3 中，透傳屬性通常使用 v-bind="$attrs" 結(jié)合 v-on="$listeners" 來實現(xiàn)。對于 CSS 樣式中的偽元素，你可以通過 ::before、::after 等偽元素來實現(xiàn)樣式效果。

下面我將詳細解釋 Vue 3 中如何實現(xiàn)屬性透傳以及如何在 CSS 樣式的偽元素中使用。

1. Vue 3 屬性透傳 (Attribute Pass-Through)

基本概念

在 Vue 中，$attrs 是一個包含父組件傳遞給子組件的所有屬性的對象（不包括 class 和 style）。這些屬性可以通過 v-bind="$attrs" 來透傳到子組件的根元素或某個特定元素。

$listeners （在 Vue 2 中稱為 $on）用于監(jiān)聽父組件傳遞的事件，也可以通過 v-on="$listeners" 傳遞給子組件的元素。

例子：屬性透傳

假設(shè)你有一個 Button 組件，想要讓父組件傳遞任何屬性給 button 元素，比如 type 或 disabled。

Button.vue（子組件）

<template><!-- 使用 $attrs 將所有傳遞給該組件的屬性透傳到 button 元素 --><button v-bind="$attrs" v-on="$listeners"><slot></slot></button>
</template><script lang="ts">
import { defineComponent } from 'vue';export default defineComponent({name: 'Button',// 此處我們可以定義 props，$attrs 會包括除了 props 之外的所有傳遞的屬性props: {label: {type: String,required: true,}}
});
</script>

Parent.vue（父組件）

<template><!-- 父組件傳遞屬性到 Button 組件 --><Button type="submit" disabled>Submit</Button>
</template><script lang="ts">
import { defineComponent } from 'vue';
import Button from './Button.vue';export default defineComponent({components: {Button,}
});
</script>

在這個例子中，Button 組件接收到的 type="submit" 和 disabled 屬性會被透傳到最終的 <button> 元素上。

注意事項

1. $attrs 只包含父組件傳遞給子組件的屬性（不包括 class 和 style，這些屬性會被自動透傳）。
2. 如果組件定義了自己的 props，傳遞給子組件的屬性不會自動作為 props 接收，必須顯式通過 v-bind="$attrs" 傳遞。

2. 在 CSS 偽元素中實現(xiàn)屬性透傳

CSS 偽元素（如 ::before 和 ::after）允許我們?yōu)樵靥砑訕邮胶蛢?nèi)容。我們可以通過 Vue 組件的 style 或 class 來間接影響偽元素的樣式。

基本的偽元素使用

假設(shè)我們要為一個按鈕添加文本前綴或后綴，通過 CSS 偽元素來實現(xiàn)：

Button.vue（子組件）

<template><button class="button" v-bind="$attrs"><slot></slot></button>
</template><style scoped>
.button {position: relative;padding-left: 20px;
}.button::before {content: attr(data-prefix);position: absolute;left: 0;top: 50%;transform: translateY(-50%);
}.button::after {content: attr(data-suffix);position: absolute;right: 0;top: 50%;transform: translateY(-50%);
}
</style><script lang="ts">
import { defineComponent } from 'vue';export default defineComponent({name: 'Button',props: {label: String,}
});
</script>

在這個例子中，我們使用了 CSS ::before 和 ::after 來實現(xiàn)偽元素，并通過 data-* 屬性將父組件傳遞的數(shù)據(jù)用于偽元素內(nèi)容。

Parent.vue（父組件）

<template><!-- 在父組件中，我們通過自定義屬性傳遞值 --><Button data-prefix="Start" data-suffix="End" label="Click Me">Button</Button>
</template><script lang="ts">
import { defineComponent } from 'vue';
import Button from './Button.vue';export default defineComponent({components: {Button,}
});
</script>

解釋

1. 在 Button.vue 中，::before 和 ::after 偽元素通過 content: attr(data-prefix) 和 content: attr(data-suffix) 讀取傳遞的自定義屬性 (data-prefix 和 data-suffix)。
2. 在 Parent.vue 中，父組件傳遞了 data-prefix 和 data-suffix 屬性，它們將會影響按鈕的偽元素內(nèi)容。

結(jié)合 v-bind 和 ::before、::after

你還可以通過 v-bind="$attrs" 將屬性傳遞給根元素，從而在根元素上動態(tài)地設(shè)置樣式或其他屬性。這可以進一步影響偽元素的樣式。

<template><button class="button" v-bind="$attrs"><slot></slot></button>
</template><style scoped>
.button {position: relative;
}.button::before {content: attr(data-content);position: absolute;left: 0;top: 50%;transform: translateY(-50%);
}
</style><script lang="ts">
import { defineComponent } from 'vue';export default defineComponent({name: 'Button',props: {label: String,}
});
</script>

父組件傳遞 data-content：

<template><Button data-content="Hello World!">Click Me</Button>
</template>

總結(jié)

• 屬性透傳：使用 v-bind="$attrs" 和 v-on="$listeners" 實現(xiàn)將父組件的屬性和事件傳遞給子組件的 DOM 元素。
• 偽元素使用：CSS 偽元素（如 ::before 和 ::after）可用 attr() 函數(shù)從元素的屬性（如 data-* 屬性）中提取內(nèi)容并顯示在頁面上。