vue元件name的作用小結

2022-05-23 16:06:13 字數 993 閱讀 4659

在寫vue專案的時候會遇到給元件的各種命名，這裡的name非必選項，看起來好像沒啥用處，但是實際上這裡用處還挺多的

1 export default


6 }
1.當專案使用keep-alive時，可搭配元件name進行快取過濾舉個例子：

我們有個元件命名為home,其中dom載入完畢後我們在鉤子函式mounted中進行資料載入

1 export default，4


mounted()，


7methods:


13      }).then(this


.getinfosuccess)14}


15  }
有兩個解決方案,乙個增加activated()函式,每次進入新頁面的時候再獲取一次資料。

還有個方案就是在keep-alive中增加乙個過濾，如下圖所示：

2.dom做遞迴元件時

比如說home.vue元件裡有個list.vue子元件，遞迴迭代時需要呼叫自身home

list.vue:

for="(item,index) of list" :key="index">


}      


if="item.children" >
list資料：

const list =


},]}, , , ]
迭代的結果如下：

3.使用vue-tools時

vue-devtools除錯工具裡顯示的元件名稱是由vue中元件name決定的

vue元件name的作用小結

我們在寫vue專案的時候會遇到給元件命名 這裡的nam非必選項，看起來好像沒啥用處，但是實際上這裡用處還挺多的 export default 1.當專案使用keep alive時，可搭配元件name進行快取過濾 舉個例子 我們有個元件命名為detail,其中dom載入完畢後我們在鉤子函式mounte...

vue中元件name的作用

這是一篇總結筆記 我們在寫vue專案的時候會遇到給元件命名 這裡的name非必選項，看起來好像沒啥用處，但是實際上這裡用處還挺多的 export default 1.當專案使用keep alive時，可搭配元件name進行快取過濾舉個例子 我們有個元件命名為detail,其中dom載入完畢後我們在鉤...

Vue元件中name屬性的作用

檢視其他人寫的元件 的時候經常會發現使用了name屬性，今天來把name屬性的經常使用的場景歸納一下 1.元件自身呼叫，遞迴元件 當在元件中需要呼叫自身的時候，可以通過name屬性來使用 2.使用vue tools工具時的元件名稱 當使用調式工具時，元件的名稱是通過name屬性來設定的 3.移除ke...