vue3中的透傳attributes教程示例詳解
引言
最近兩年都是在使用 react 進行項目開發(fā)，看技術博客都是針對 react 和 javaScript 高級方面的，對 vue 的知識基本上遺忘的差不多了。最近開始慢慢回顧 vue 的知識以及對新的語法進行學習，為后面的計劃做準備（哈哈哈，懂得都懂）。
先從最簡單的樣式開始吧。
綁定樣式
vue 的樣式綁定要人性化很多，react 實現(xiàn) vue 的這種寫法，還需要專門下載一個第三方庫: classnames。
vue 的樣式綁定有兩種形式：對象和數(shù)組。
相對而言，個人還是比較的偏向對象的寫法，可能 react 寫習慣了吧。原因有兩點：
- 數(shù)組能實現(xiàn)的，對象也能使用（反之亦然）。
- 在 DOM 結構中，使用數(shù)組的
[]形式，感覺看起來比較的怪異，復雜。
對象
我把對象的形式分為三種場景，分別如下：
場景一：循環(huán)列表，根據(jù)列表項的某屬性的不同而展示不同
<script setup lang="ts">
const list = [
{
id: "1",
name: "name1",
isActive: true,
},
{
id: "2",
name: "name2",
isActive: false,
},
{
id: "3",
name: "name3",
isActive: false,
},
];
</script>
<template>
<div
v-for="item in list"
:key="item.id"
class="common"
:class="{ isActive: item.isActive }"
>
{{ item.name }}
</div>
</template>
<style>
.isActive {
color: red;
}
</style>
根據(jù)列表項的isActive的屬性值不同，來判斷是否顯示isActive類名。
場景二：通過觸發(fā)事件，來展示不同的樣式。
這種情況一般針對于用戶操作，比如點擊按鈕觸發(fā)事件，來修改某一內(nèi)容的樣式。
<script setup lang="ts">
import { ref } from "vue";
const isActive = ref<boolean>(false);
// 事件改變 data 屬性值
const btn = () => {
isActive.value = !isActive.value;
};
</script>
<template>
<div class="common" :class="{ isActive: isActive }">文字說明</div>
<button @click="btn">改變樣式</button>
</template>
<style>
.common {
font-size: 20px;
}
.isActive {
color: red;
}
通過點擊事件，修改 data 中的值，從而影響到 div 標簽的類名展示。
情況三：當關聯(lián)多個動態(tài)樣式，直接綁定一個對象
上面的情況，當存在少量的動態(tài)樣式（1~2個）的時候，可以直接寫在DOM結構中，閱讀性可觀。當存在多個的時候，還這樣寫的話，可能 DOM 就顯的混亂了，閱讀性極低，這時借助一個對象就很好的解決了這個問題。
<script setup lang="ts">
import { reactive } from "vue";
const classObj = reactive({
isActive: true,
hasError: false,
textRed: true,
});
</script>
<template>
<div class="common" :class="classObj">文字說明</div>
</template>
數(shù)組
數(shù)組的寫法，對于個人來說，就大致的了解下就行了。
形式一：綁定多個class
<script setup lang="ts">
import { ref } from "vue";
const activeClass = ref("active");
const errorClass = ref("text-danger");
</script>
<template>
<div :class="[activeClass, errorClass]"></div>
</template>
最后渲染出來的結果：
<div class="active text-danger"></div>
形式二：數(shù)組中的判斷
<!--三目運算符的判斷-->
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<!--數(shù)組中嵌套對象的判斷-->
<div :class="[{activeClass: isActive}, errorClass]"></div>
vue 中的動態(tài) style 跟 class 的用法基本相似的，就不用多說了。
透傳的attributes
在上面的樣式綁定中，都是把 class 寫在了原生標簽上，那么如果把 class 寫在組件上，效果是什么呢？
在此之前，先來彌補兩個小知識點。
知識點一：vue3 支持多個根節(jié)點
<!--vue2: 錯誤的寫法--> <template> <div></div> <div></div> </template> <!--vue3: 正確--> <template> <div></div> <div></div> </template>
知識點二：什么是透傳的attributes？
“透傳 attribute”指的是傳遞給一個組件，卻沒有被該組件聲明為 props 或 emits 的 attribute 或者 v-on 事件監(jiān)聽器。常見的有 class style id.
簡單的理解就是：傳遞給子組件的屬性，但是被沒有在子組件聲明，就是透傳 attributes。
準備工作完成，可以開始正題了。
透傳 attributes 之樣式綁定
分為兩種情況，只有一個根節(jié)點或者多個根節(jié)點。
情況一：子組件只有一個根節(jié)點
<!--son子組件--> <template> <div class="own">son組件</div> </template>
存在自身的類名 own
<!--父組件使用Son--> <Son class='abc' />
class 并沒有在 props 中申明，那么它就是透傳 attributes。
那么最后渲染的結果：
<div class='abc own'>son組件</div>
就會主動的綁定到根節(jié)點上去，與原來的 class 進行組合。
情況二：子組件有多個根節(jié)點
存在多個根節(jié)點的時候，并且還傳遞了透傳 attributes，如果沒有手動處理的話，是會存在警告的。
<!--son子組件--> <template> <div class="own">son組件1</div> <div class="own">son組件2</div> </template>
<!--父組件使用Son--> <Son class='abc' />
沒有處理，拋出警告：
那么處理警告的方式兩種：
- 禁用透傳 attributes，設置
inheritAttrs為 false（后面再說）。 - 手動處理，具體綁定在哪一個根節(jié)點。
<!--son子組件--> <template> <div class="own" :class="$attrs['class']">son組件1</div> <div class="own">son組件2</div> </template>
這樣警告也會消失，并且把透傳 attributes 綁定在了第一個根節(jié)點上。這里的$attrs是一個對象，需要具體指明某個屬性。
最后渲染的結果：
<div class="own abc">son組件1</div> <div class="own">son組件2</div>
透傳 attributes 之事件綁定
上面只是針對樣式進行了透傳，那么事件的話，又會是怎么樣的呢？
先說結論吧，表現(xiàn)形式跟樣式綁定是基本一樣的。
<!--子組件Son-->
<script setup lang="ts">
const btn1 = () => {
console.log("子組件的點擊事件");
};
</script>
<template>
<button @click="btn1">點擊</button>
</template>
現(xiàn)在子組件的根節(jié)點是一個 button 標簽，并且上面綁定了一個點擊事件。
<!--父組件使用-->
<script setup lang="ts">
import Son from "./Son.vue";
const btn = () => {
console.log("父組件的點擊事件");
};
</script>
<template>
<Son @click="btn" />
</template>
父組件調(diào)用，也傳遞了一個透傳的事件過來。當點擊按鈕：
發(fā)現(xiàn)，子組件的事件被觸發(fā)了，父組件傳遞過來的事件也被觸發(fā)了，順序為先子后父。
透傳的 attributes 基本說完了，接下來就看看幾個特殊部分吧。
特殊1：組件嵌套
有些情況下一個組件會在根節(jié)點上渲染另一個組件。那么透傳 attributes 也會繼續(xù)傳遞下去。
<!--baseChild--> <template> <div></div> </template> <!--child--> <template> <base-child /> </template> <!--father--> <Child class='abc'/>
那么最后渲染的結果：
<div class='abc'></div>
特殊2：禁用透傳attributes
設置 inheritAttrs：false，就禁止使用了自動綁定，可以消除前面所說的警告；然后就可以自由的綁定 $attrs, 該對象就包含了傳遞過來的透傳 attributes。
<!--如果是setup寫法，就需要單獨添加一個script標簽，暴露一個配置對象-->
<script lang="ts">
export default {
inheritAttrs: false, // 禁用
};
</script>
<script setup lang="ts">
const btn1 = () => {
console.log("子組件的點擊事件");
};
</script>
<template>
<button @click="btn1">點擊</button>
</template>
需要注意的是：
- 和 props 有所不同，透傳 attributes 在 JavaScript 中保留了它們原始的大小寫，所以像 foo-bar 這樣的一個 attribute 需要通過
$attrs['foo-bar']來訪問。 - 像 @click 這樣的一個 v-on 事件監(jiān)聽器將在此對象下被暴露為一個函數(shù)
$attrs.onClick。
特殊3：在 javascript 中訪問透傳的attributes
在組件實例中獲取，通過 this 的形式
export default {
created() {
console.log(this.$attrs)
}
}
總結
回顧了vue中動態(tài)綁定樣式，還是比較簡單；又新學習了一點 vue3 的新知識：透傳attributes，收獲滿滿。
參考文檔
以上就是vue3中的透傳attributes教程示例詳解的詳細內(nèi)容，更多關于vue3透傳attributes的資料請關注腳本之家其它相關文章！
相關文章
vscode開發(fā)vue非常好用,因為有很多的插件,可以補全語法,或者高亮便于檢查錯誤,但我最近發(fā)現(xiàn)我的vscode卻沒有了代碼提示,這篇文章主要給大家介紹了關于VSCode中書寫Vue無代碼提示該如何解決的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了如何利用Vue實現(xiàn)向PDF文件中添加二維碼的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2023-06-06
狀態(tài)管理也就是數(shù)據(jù)狀態(tài)管理，vue應用程序的各組件之間經(jīng)常需要進行通信，除了v-on、EventBus等通信方式外，可以采用數(shù)據(jù)共享的方式進行通信。這種簡單的數(shù)據(jù)共享模式就是store模式。2021-05-05
Vue和relation-graph庫打造高質(zhì)量的關系圖應用程序
這篇文章主要介紹了Vue和relation-graph庫打造高質(zhì)量的關系圖應用程序,在這篇文章中,我們深入探討了如何使用Vue和relation-graph高效打造關系圖,我們詳細介紹了數(shù)據(jù)準備、關系映射、點擊事件等關鍵步驟,需要的朋友可以參考下2023-09-09
這篇文章給大家介紹了Vue.js 表單控件操作的相關知識，本文通過實例演示了input和textarea元素中使用v-model的方法，本文給大家介紹的非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
這篇文章主要介紹了關于Vue的?Vuex的4個輔助函數(shù),輔助函數(shù)的好處就是幫助我們簡化了獲取store中state、getter、mutation和action,下面我們一起來看看文章具體的舉例說明吧，需要的小伙伴也可以參考一下2021-12-12
這篇文章主要介紹了在vue2.x里面簡單使用socketio問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue實現(xiàn)數(shù)字動態(tài)翻牌的效果（開箱即用）
這篇文章主要介紹了vue實現(xiàn)數(shù)字動態(tài)翻牌的效果（開箱即用）,實現(xiàn)原理是激將1到9的數(shù)字豎直排版，通過translate移動位置顯示不同數(shù)字，本文通過實例代碼講解，需要的朋友可以參考下2019-12-12
詳解vue結合el-table實現(xiàn)表格小計總計需求(summary-method)
這篇文章主要介紹了vue結合el-table實現(xiàn)表格小計總計需求(summary-method),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
前端使用uniapp開發(fā)項目完成后，需要將頁面打包，生成H5的靜態(tài)文件，部署在服務器上這樣通過服務器鏈接地址，直接可以在手機上點開來訪問，下面小編給大家講解uniapp開發(fā)打包成H5部署到服務器的步驟，感興趣的朋友一起看看吧2022-11-11