Vue元件中name屬性的作用

2021-10-22 16:51:19 字數 895 閱讀 8924

檢視其他人寫的元件**的時候經常會發現使用了name屬性,今天來把name屬性的經常使用的場景歸納一下

1.元件自身呼叫,遞迴元件

當在元件中需要呼叫自身的時候,可以通過name屬性來使用

2.使用vue-tools工具時的元件名稱

當使用調式工具時,元件的名稱是通過name屬性來設定的

3.移除keep-alive狀態下元件自動快取功能

我們知道,在元件外使用了keep-alive導致我們第二次進入的時候頁面不會重新請求ajax,即mounted() 鉤子函式只會執行一次

解決的辦法乙個增加activated()函式,每次進入新頁面的時候再獲取一次資料(此處可以了解一下keep-alive狀態下的activated()函式和deactivated()函式)

另外乙個辦法就是keep-alive中增加 exclud=「name」,移除選中頁面的快取

"name"

>

>

<

/keep-alive>

需要特別注意的是:

name的使用過程中報錯

[vue warn]: do not use built-in or reserved html elements as component id: ****

解決辦法:

在component裡面註冊元件的時候避免用html已有的標籤來接收元件;

import header from

'@/components/header/header'

;export

default

};

vue中元件name的作用

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

vue元件name屬性

我們在寫vue專案的時候會遇到給元件命名 這裡的name非必選項,看起來好像沒啥用處,但是實際上這裡用處還挺多的 export default 舉個例子 我們有個元件命名為detail,其中dom載入完畢後我們在鉤子函式mounted中進行資料載入 export default mounted me...

vue元件name屬性的作用和元件遞迴實現資料樹

在vue元件註冊時,會有乙個name屬性,那麼vue元件註冊的時候的name屬性有什麼作用呢?先來看看官網,如下所示 簡單來說就是 允許元件模板遞迴地呼叫自身 便於除錯 包括警告資訊以及通過vue devtools除錯時可以更方便的定位到元件 便於獲取更有語義資訊的元件樹 還有一點,就是,可以配合k...