快捷導(dǎo)航

Vue透?jìng)鰽ttributes使用解析

更新時(shí)間：2023年02月01日 10:35:47 作者：前端、老六

本文主要介紹了Vue透?jìng)鰽ttributes使用解析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

透?jìng)魇莢ue中一種特性，官方的解釋是：“透?jìng)?attribute”指的是傳遞給一個(gè)組件，卻沒(méi)有被該組件聲明為 props 或 emits 的 attribute 或者 v-on 事件監(jiān)聽(tīng)器。最常見(jiàn)的例子就是 class、style 和 id。這句話解釋過(guò)來(lái)就是一些不被prop定義的屬性直接添加到子組件上的時(shí)候，子組件是可以獲取到的，只不過(guò)獲取的方式是通過(guò)方法獲取的，下面我們展開(kāi)說(shuō)一下

幾個(gè)特性：

透?jìng)鞯膶傩灾粫?huì)直接傳給單根節(jié)點(diǎn)的組件，如果子組件不是一個(gè)根節(jié)點(diǎn)，那么透?jìng)鲗傩詴?huì)直接失效，并且警告
子節(jié)點(diǎn)如果不是單根節(jié)點(diǎn)的時(shí)候，可以通過(guò)添加v-bind=“$attrs” 的屬性進(jìn)行某一個(gè)dom元素的透?jìng)?/li>
透?jìng)鬟^(guò)去的屬性如果和子組件上的命名重復(fù)了，會(huì)以子組件本身的屬性為主
透?jìng)鬟^(guò)去的屬性如果和子組件上的屬性重復(fù)了，會(huì)直接添加到屬性值的后面
透?jìng)鞯淖咏M件里面如果只有一個(gè)根節(jié)點(diǎn)，這個(gè)根節(jié)點(diǎn)是另一個(gè)組件的時(shí)候，透?jìng)鞯膶傩詴?huì)直接傳遞給他本身的子組件
透?jìng)鬟^(guò)去的屬性ID獲取需要在dom節(jié)點(diǎn)加載結(jié)束進(jìn)行，否則是獲取不到的

以上特性我們挨個(gè)說(shuō)一下

透?jìng)鞯膶傩灾粫?huì)直接傳給單根節(jié)點(diǎn)的組件子組件attrs

父組件

這個(gè)時(shí)候效果是沒(méi)問(wèn)題的，但是如果我們給子組件添加一個(gè)節(jié)點(diǎn)

這個(gè)時(shí)候self-btn的樣式并沒(méi)有傳遞出去，因?yàn)楹瓦@個(gè)時(shí)候他并不知道要傳遞給哪一個(gè)dom元素，同時(shí)會(huì)曝這樣一條警告

子節(jié)點(diǎn)如果不是單根節(jié)點(diǎn)的時(shí)候，可以通過(guò)添加v-bind=“$attrs” 的屬性進(jìn)行某一個(gè)dom元素的透?jìng)?/p>

這個(gè)時(shí)候我們給其中一個(gè)添加上v-bind="$attrs"屬性

此時(shí)的警告也沒(méi)有了，通過(guò)這樣的方式我們可以進(jìn)行自己決定透?jìng)鹘o哪一個(gè)dom元素

透?jìng)鬟^(guò)去的屬性如果和子組件上的命名重復(fù)了，會(huì)以子組件本身的屬性為主透?jìng)鬟^(guò)去的屬性如果和子組件上的屬性重復(fù)了，會(huì)直接添加到屬性值的后面

這兩個(gè)通過(guò)上面的例子相信你們已經(jīng)看出來(lái)了，這里就不做演示了

透?jìng)鞯淖咏M件里面如果只有一個(gè)根節(jié)點(diǎn)，這個(gè)根節(jié)點(diǎn)是另一個(gè)組件的時(shí)候，透?jìng)鞯膶傩詴?huì)直接傳遞給他本身的子組件

我們?cè)谧咏M件中再引入另一個(gè)組件進(jìn)行嘗試 : deepAttrs

透?jìng)鬟^(guò)去的屬性ID獲取需要在dom節(jié)點(diǎn)加載結(jié)束進(jìn)行，否則是獲取不到的

既然可以透?jìng)鲗傩?，那么我們傳遞過(guò)去的ref和id理論上也是可以直接被獲取到的，代碼嘗試一下

可以看到上面打印的結(jié)果是可以獲取到的，但是如果是直接獲取的話，dom元素是null，也就是直接獲取的話，會(huì)因?yàn)閐om加載順序的問(wèn)題導(dǎo)致獲取不到最后的dom，這里需要注意一點(diǎn)

可能存在的疑問(wèn) 如果我子組件只有一個(gè)根節(jié)點(diǎn)，但是我不想被透?jìng)髟趺崔k呢？

如上所示，我們給js模塊部分添加 inheritAttrs:false即可，默認(rèn)的值是true，設(shè)置為false的時(shí)候透?jìng)鞯膶傩跃貌淮嬖诹?/p>

我怎么在js中獲取到透?jìng)鞯膶傩阅兀?/p>

使用useAttrs即可獲取到對(duì)應(yīng)的透?jìng)鬟^(guò)來(lái)的屬性

如果我不適用setup的語(yǔ)法糖進(jìn)行呢？

這里直接使用官網(wǎng)的例子給解答

以上就是關(guān)于vue中透?jìng)鞯囊恍┦褂茫夜ぷ髦杏玫恼f(shuō)實(shí)話不太多，但是這種東西就是用不到的時(shí)候覺(jué)得沒(méi)有什么用，但是一旦用到了，就會(huì)覺(jué)得特別的實(shí)用，所以還是很有必要了解一下的，到此這篇關(guān)于Vue透?jìng)鰽ttributes使用解析的文章就介紹到這了,更多相關(guān)Vue透?jìng)鰽ttributes內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: