透傳是vue中一種特性，官方的解釋是：“透傳 attribute”指的是傳遞給一個組件，卻沒有被該組件聲明為 props 或 emits 的 attribute 或者 v-on 事件監(jiān)聽器。最常見的例子就是 class、style 和 id。這句話解釋過來就是一些不被prop定義的屬性直接添加到子組件上的時候，子組件是可以獲取到的，只不過獲取的方式是通過方法獲取的，下面我們展開說一下

幾個特性：

• 透傳的屬性只會直接傳給單根節(jié)點的組件，如果子組件不是一個根節(jié)點，那么透傳屬性會直接失效，并且警告
• 子節(jié)點如果不是單根節(jié)點的時候，可以通過添加v-bind=“$attrs” 的屬性進行某一個dom元素的透傳
• 透傳過去的屬性如果和子組件上的命名重復了，會以子組件本身的屬性為主
• 透傳過去的屬性如果和子組件上的屬性重復了，會直接添加到屬性值的后面
• 透傳的子組件里面如果只有一個根節(jié)點，這個根節(jié)點是另一個組件的時候，透傳的屬性會直接傳遞給他本身的子組件
• 透傳過去的屬性ID獲取需要在dom節(jié)點加載結(jié)束進行，否則是獲取不到的

以上特性我們挨個說一下

透傳的屬性只會直接傳給單根節(jié)點的組件 子組件attrs

父組件

這個時候效果是沒問題的，但是如果我們給子組件添加一個節(jié)點

這個時候self-btn的樣式并沒有傳遞出去，因為和這個時候他并不知道要傳遞給哪一個dom元素，同時會曝這樣一條警告

子節(jié)點如果不是單根節(jié)點的時候，可以通過添加v-bind=“$attrs” 的屬性進行某一個dom元素的透傳

這個時候我們給其中一個添加上v-bind="$attrs"屬性

此時的警告也沒有了，通過這樣的方式我們可以進行自己決定透傳給哪一個dom元素

透傳過去的屬性如果和子組件上的命名重復了，會以子組件本身的屬性為主 透傳過去的屬性如果和子組件上的屬性重復了，會直接添加到屬性值的后面

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

透傳的子組件里面如果只有一個根節(jié)點，這個根節(jié)點是另一個組件的時候，透傳的屬性會直接傳遞給他本身的子組件

我們在子組件中再引入另一個組件進行嘗試 : deepAttrs

透傳過去的屬性ID獲取需要在dom節(jié)點加載結(jié)束進行，否則是獲取不到的

既然可以透傳屬性，那么我們傳遞過去的ref和id理論上也是可以直接被獲取到的，代碼嘗試一下

可以看到上面打印的結(jié)果是可以獲取到的，但是如果是直接獲取的話，dom元素是null，也就是直接獲取的話，會因為dom加載順序的問題導致獲取不到最后的dom，這里需要注意一點

可能存在的疑問 如果我子組件只有一個根節(jié)點，但是我不想被透傳怎么辦呢？

如上所示，我們給js模塊部分添加 inheritAttrs:false即可，默認的值是true，設置為false的時候透傳的屬性久不存在了

我怎么在js中獲取到透傳的屬性呢？

使用useAttrs即可獲取到對應的透傳過來的屬性

如果我不適用setup的語法糖進行呢？

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

以上就是關于vue中透傳的一些使用，我工作中用的說實話不太多，但是這種東西就是用不到的時候覺得沒有什么用，但是一旦用到了，就會覺得特別的實用，所以還是很有必要了解一下的，到此這篇關于Vue透傳Attributes使用解析的文章就介紹到這了,更多相關Vue透傳Attributes內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論