vue3中的 $attrs 與 Attributes 繼承

更新時(shí)間：2024年02月26日 10:08:23 作者：cocoonne

這篇文章主要介紹了vue3中的 $attrs 與 Attributes 繼承的相關(guān)資料,首先介紹了什么是Attributes 繼承,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

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)聽器等等。

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