---

歡迎關(guān)注 『VUE』 專欄，持續(xù)更新中
歡迎關(guān)注 『VUE』 專欄，持續(xù)更新中

什么是透?jìng)鲗傩?#xff08;Forwarding Attributes）

在 Vue.js 中，透?jìng)鲗傩?#xff08;Forwarding Attributes）是指在組件中將父組件傳遞給子組件的屬性，直接傳遞給子組件內(nèi)部的某個(gè)特定元素或子組件。這樣可以使得父組件的屬性在子組件中使用，而無(wú)需顯式地在子組件中聲明這些屬性。

---

使用條件唯一根節(jié)點(diǎn)

相當(dāng)于<h3>透?jìng)鲗傩?lt;/h3>獲得了<AttrComponent class="attr-container" />的class="attr-container"

如果有如下結(jié)構(gòu),有兩個(gè)h3那么不是唯一的根節(jié)點(diǎn),不會(huì)生效

<template><h3>透?jìng)鲗傩?span id="vxwlu0yf4"    class="token tag"></h3><h3>透?jìng)鲗傩?</h3>
</template>

App.vue

<template><!-- <GlobalHeader /><Main /><Aside /> --><!-- <Parent /> --><!-- <ComponentEvent /> --><!-- <ComponentP /> --><AttrComponent class="attr-container" />
</template><script>
// import Header from "./page/Header.vue";
// import Main from "./page/Main.vue";
// import Aside from "./page/Aside.vue";
// import Child from "./components/Child.vue";
// import Parent from "./components/Parent.vue";
// import ComponentEvent from "./components/ComponentEvent.vue";
// import ComponentEventSon from "./components/ComponentEventSon.vue";
// import Main from "./components/Main.vue";
// import ComponentP from "./components/ComponentP.vue";
import AttrComponent from "./components/AttrComponent.vue";export default {components: {// Header,// Main,// Aside,// Child,// Parent,// ComponentEvent,// ComponentEventSon,// Main,// ComponentP,AttrComponent,},
};
</script><style scoped></style>
./components/ComponentP.vue

AttrComponent.vue

<template><h3>透?jìng)鲗傩?span id="vxwlu0yf4"    class="token tag"></h3>
</template><style>
.attr-container {color: red;
}
</style>

---

禁用透?jìng)鲗傩岳^承

使用 inheritAttrs: false: 在子組件中將 inheritAttrs 設(shè)置為 false，可以阻止自動(dòng)將父組件的屬性應(yīng)用到根元素上，需要手動(dòng)處理透?jìng)鲗傩浴?/p>

AttrComponent.vue

<template><h3>透?jìng)鲗傩?span id="vxwlu0yf4"    class="token tag"></h3><!-- <h3>透?jìng)鲗傩?</h3> -->
</template><script>
export default {inheritAttrs: false,
};
</script><style>
.attr-container {color: red;
}
</style>

---

總結(jié)

大家喜歡的話，給個(gè)👍，點(diǎn)個(gè)關(guān)注！給大家分享更多計(jì)算機(jī)專業(yè)學(xué)生的求學(xué)之路！

版權(quán)聲明：

發(fā)現(xiàn)你走遠(yuǎn)了@mzh原創(chuàng)作品，轉(zhuǎn)載必須標(biāo)注原文鏈接

Copyright 2024 mzh

Crated：2024-3-1

歡迎關(guān)注 『VUE』 專欄，持續(xù)更新中
歡迎關(guān)注 『VUE』 專欄，持續(xù)更新中
『未完待續(xù)』

---