千鋒教育前端Vue3.0全套視頻教程（Kerwin2023版，Vue.js零基礎(chǔ)
2023-07-21 09:13 作者:bili_70644852694 | 我要投稿
什么是屬性透傳
在Vue3中有一個很有意思的特性，透傳屬性。透傳又分為自動透傳綁定，和手動綁定兩種。
什么是透傳屬性？?透傳屬性指組件在使用的時候，作用在組件上的屬性，會被向下流動，綁定到組件內(nèi)的標簽中。
什么是透傳屬性：
- 作用在組件上的屬性（
class，id，style，屬性，事件）會被向下流動，作用組件的標簽上。這些屬性就是透傳屬性。 - 如果這個屬性或事件，沒有在組件中定義，那么它就是透傳屬性，反之則不是。
使用透傳屬性：
- 在模板中通過
$attrs對象來使用透傳屬性，在代碼中通過useAttrs()api來獲取到透傳對象，然后使用
透傳分為自動透傳和手動綁定兩種：
- 自動透傳：在只有一個根標簽的組件中，作用在組件上的屬性會默認自動透傳綁定到該組件的根標簽上。
- 手動綁定：在擁有多個根標簽的組件中，是沒有默認的自動透傳綁定的，因為
Vue不知道綁定給哪個根標簽，需要我們手動去綁定。 - 手動綁定透傳屬性，是可以綁定任意的標簽元素的，并且可以綁定給多個。
關(guān)閉自動透傳：
- 我們可以在組件內(nèi)通過
inheritAttrs: false來關(guān)閉組件默認自動綁定行為。
獲取透傳屬性：
在模板中通過$attrs對象來使用透傳屬性，在代碼中通過useAttrs()api來獲取到透傳對象，然后使用。通過透傳對象可以獲取透傳過來的 class，style，id，事件和屬性等。
透傳屬性和props：
傳入一個屬性或者是事件，如果這個屬性、事件沒有在組件中定義，那么它依然是透傳屬性，因為沒有東西接受它。
如果是事先定義了defineEmits或defineProps來接受它，那么它就是props屬性或自定義事件，不再是透傳屬性。
總之一句話:如果這個屬性事件，沒有再組件中定義，那么它就是透傳屬性，反之則不是。
標簽：
