vue3中的 $attrs 與 Attributes 繼承
vue3中的 $attrs 與 Attributes 繼承
官方文檔：https://cn.vuejs.org/guide/components/attrs.html#attribute-inheritance
首先介紹一下什么是 Attributes 繼承，即屬性繼承！
當(dāng)一個父組件給子組件綁定屬性時（props屬性、class屬性、自定義事件、style屬性等等）
// 父組件
<Demo
@click="fn1"
@getname="fn2"
numm="111"
:name="slotName"
class="abc"
>
</Demo>子組件的根元素（即最外層的元素）會自動繼承除去 props、emits 之外的屬性
而這些屬性都被封裝到了 $attrs 對象上
// demo.vue
<template>
<div>
{{ $attrs }}
</div>
</template>
<script setup>
import { ref, useAttrs } from 'vue'
const props = defineProps({
name: String
})
let attrs = useAttrs()
console.log(attrs)
</script>
attrs = Proxy {numm: ‘111’, class: ‘abc’, __vInternal: 1, onClick: ƒ, onGetname: ƒ}
$attrs：
這個 $attrs 對象包含了除組件所聲明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 監(jiān)聽器等等。
禁用 Attributes 繼承：取消根節(jié)點(diǎn)自動繼承
// 需要額外加上一個配置
<script>
export default {
inheritAttrs: false,
}
</script>
<script setup>
import { ref, useAttrs } from 'vue'
const props = defineProps({
name: String
})
ref(12)
let attrs = useAttrs()
console.log(attrs)
</script>v-bind=$attrs
實現(xiàn)孫組件的 Attribute 繼承
我們想要所有的透傳 attribute 都應(yīng)用在內(nèi)部的元素中， 而不是外層的根節(jié)點(diǎn)上。我們可以通過設(shè)定 inheritAttrs: false 和使用 v-bind="$attrs" 來實現(xiàn)
<div class="btn-wrapper"> <button class="btn" v-bind="$attrs">click me</button> </div>
沒有參數(shù)的
v-bind會將 $attrs 的所有屬性都作為 attribute 應(yīng)用到目標(biāo)元素上
到此這篇關(guān)于vue3中的 $attrs 與 Attributes 繼承的文章就介紹到這了,更多相關(guān)vue3 $attrs 與 Attributes 繼承內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue Cli 環(huán)境刪除與重裝教程 - 版本文檔
這篇文章主要介紹了vue Cli 環(huán)境刪除與重裝教程 - 版本文檔，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
@vueuse/core提供了豐富的功能性鉤子,使得處理常見的開發(fā)任務(wù)變得更加簡潔和高效,本文將詳細(xì)介紹如何在Vue3項目中使用?@vueuse/core及其一些極具價值的功能,需要的可以參考下2024-11-11
Vue預(yù)渲染：prerender-spa-plugin生成靜態(tài)HTML與vue-meta-info更新meta
Vue.js中,prerender-spa-plugin和vue-meta-info插件的結(jié)合使用,提供了解決SEO問題的方案,prerender-spa-plugin通過預(yù)渲染技術(shù)生成靜態(tài)HTML,而vue-meta-info則能動態(tài)管理頁面元數(shù)據(jù),本文將探討如何使用這兩個工具優(yōu)化Vue.js項目的SEO表現(xiàn),包括安裝、配置及注意事項2024-10-10
Vue項目中數(shù)據(jù)的深度監(jiān)聽或?qū)ο髮傩缘谋O(jiān)聽實例
這篇文章主要介紹了Vue項目中數(shù)據(jù)的深度監(jiān)聽或?qū)ο髮傩缘谋O(jiān)聽實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文介紹了一個使用Vue3開發(fā)的返回頂部組件,具有智能顯示,絲滑動畫,平滑滾動和類型安全等特性.文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2026-04-04
這篇文章主要介紹了代碼詳解Vuejs響應(yīng)式原理的基礎(chǔ)知識，有興趣的朋友們參考學(xué)習(xí)下吧。2017-12-12
這篇文章主要介紹了淺談Vue.use到底是什么鬼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
文章介紹了WebSocket協(xié)議的基礎(chǔ)概念、特點(diǎn)及與HTTP的區(qū)別,詳解了在Vue中的集成方式（組件內(nèi)/插件封裝/Vuex管理）,并涵蓋連接管理、安全性、數(shù)據(jù)格式等最佳實踐,列舉了Socket.IO和SockJS等常用庫,適用于實時通信場景,感興趣的朋友一起看看吧2025-08-08
vue實現(xiàn)在線進(jìn)制轉(zhuǎn)換功能
這篇文章主要介紹了vue實現(xiàn)在線進(jìn)制轉(zhuǎn)換功能,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-04-04
vue 集成 vis-network 實現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D的方法
這篇文章主要介紹了vue 集成 vis-network 實現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D的方法，本文通過實例代碼給大家介紹的非常詳細(xì) ,需要的朋友可以參考下2019-08-08