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
實(shí)現(xiàn)孫組件的 Attribute 繼承
我們想要所有的透傳 attribute 都應(yīng)用在內(nèi)部的元素中， 而不是外層的根節(jié)點(diǎn)上。我們可以通過設(shè)定 inheritAttrs: false 和使用 v-bind="$attrs" 來實(shí)現(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同一路由強(qiáng)制刷新頁面的實(shí)現(xiàn)過程
這篇文章主要介紹了解決VUE同一路由強(qiáng)制刷新頁面的問題，本文給大家分享實(shí)現(xiàn)過程，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue前端打包的詳細(xì)流程,下面文章圍繞Vue前端打包的相關(guān)資料展開詳細(xì)內(nèi)容,需要的小伙伴可以參考一下，希望對大家有所幫助2021-11-11
這篇文章主要介紹了vue如何向后臺傳遞日期，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue3渲染函數(shù)(h函數(shù))的變化,文中給大家介紹了h函數(shù)的三個參數(shù)詳細(xì)說明及vue3 h函數(shù)-綁定事件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了8個非常實(shí)用的Vue自定義指令，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue-cli3.0移除了配置文件目錄： config和build文件夾?？梢哉f是非常的精簡了，那移除了配置文件目錄后如何自定義配置環(huán)境變量和模式呢?這篇文章主要介紹了vue-cli3.0 環(huán)境變量與模式 ,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue基礎(chǔ)之模板和過濾器用法,結(jié)合實(shí)例形式分析了vue模板與過濾器的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
插槽，也就是slot，是組件的一塊HTML模板，這塊模板顯示不現(xiàn)實(shí)、以及怎樣顯示由父組件來決定。這篇文章主要介紹了淺析vue插槽和作用域插槽的理解,需要的朋友可以參考下2019-04-04
vue.js出現(xiàn)Vue.js?not?detected錯誤的解決方案
這篇文章主要介紹了vue.js出現(xiàn)Vue.js?not?detected錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
ref和reactive一樣,也是用來實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法,下面這篇文章主要給大家介紹了關(guān)于vue3給動態(tài)渲染的組件添加ref的解決方案,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11