vue3中的 $attrs 與 Attributes 繼承
vue3中的 $attrs 與 Attributes 繼承
官方文檔：https://cn.vuejs.org/guide/components/attrs.html#attribute-inheritance
首先介紹一下什么是 Attributes 繼承，即屬性繼承！
當(dāng)一個(gè)父組件給子組件綁定屬性時(shí)（props屬性、class屬性、自定義事件、style屬性等等）
// 父組件
<Demo
@click="fn1"
@getname="fn2"
numm="111"
:name="slotName"
class="abc"
>
</Demo>子組件的根元素（即最外層的元素）會(huì)自動(dòng)繼承除去 props、emits 之外的屬性
而這些屬性都被封裝到了 $attrs 對(duì)象上
// 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：
這個(gè) $attrs 對(duì)象包含了除組件所聲明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 監(jiān)聽(tīng)器等等。
禁用 Attributes 繼承：取消根節(jié)點(diǎn)自動(dòng)繼承
// 需要額外加上一個(gè)配置
<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
實(shí)現(xiàn)孫組件的 Attribute 繼承
我們想要所有的透?jìng)?attribute 都應(yīng)用在內(nèi)部的元素中， 而不是外層的根節(jié)點(diǎn)上。我們可以通過(guò)設(shè)定 inheritAttrs: false 和使用 v-bind="$attrs" 來(lái)實(shí)現(xiàn)
<div class="btn-wrapper"> <button class="btn" v-bind="$attrs">click me</button> </div>
沒(méi)有參數(shù)的
v-bind會(huì)將 $attrs 的所有屬性都作為 attribute 應(yīng)用到目標(biāo)元素上
到此這篇關(guān)于vue3中的 $attrs 與 Attributes 繼承的文章就介紹到這了,更多相關(guān)vue3 $attrs 與 Attributes 繼承內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue同一路由強(qiáng)制刷新頁(yè)面的實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了解決VUE同一路由強(qiáng)制刷新頁(yè)面的問(wèn)題，本文給大家分享實(shí)現(xiàn)過(guò)程，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue前端打包的詳細(xì)流程,下面文章圍繞Vue前端打包的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容,需要的小伙伴可以參考一下，希望對(duì)大家有所幫助2021-11-11
這篇文章主要介紹了vue如何向后臺(tái)傳遞日期，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue3渲染函數(shù)(h函數(shù))的變化,文中給大家介紹了h函數(shù)的三個(gè)參數(shù)詳細(xì)說(shuō)明及vue3 h函數(shù)-綁定事件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了8個(gè)非常實(shí)用的Vue自定義指令，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue-cli3.0移除了配置文件目錄： config和build文件夾?？梢哉f(shuō)是非常的精簡(jiǎn)了，那移除了配置文件目錄后如何自定義配置環(huán)境變量和模式呢?這篇文章主要介紹了vue-cli3.0 環(huán)境變量與模式 ,需要的朋友可以參考下2018-11-11
vue基礎(chǔ)之模板和過(guò)濾器用法實(shí)例分析
這篇文章主要介紹了vue基礎(chǔ)之模板和過(guò)濾器用法,結(jié)合實(shí)例形式分析了vue模板與過(guò)濾器的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
插槽，也就是slot，是組件的一塊HTML模板，這塊模板顯示不現(xiàn)實(shí)、以及怎樣顯示由父組件來(lái)決定。這篇文章主要介紹了淺析vue插槽和作用域插槽的理解,需要的朋友可以參考下2019-04-04
vue.js出現(xiàn)Vue.js?not?detected錯(cuò)誤的解決方案
這篇文章主要介紹了vue.js出現(xiàn)Vue.js?not?detected錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3給動(dòng)態(tài)渲染的組件添加ref的解決方案
ref和reactive一樣,也是用來(lái)實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法,下面這篇文章主要給大家介紹了關(guān)于vue3給動(dòng)態(tài)渲染的組件添加ref的解決方案,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11