咱們在寫vue項目的時候會遇到給組件命名vue
這裏的name非必選項,看起來好像沒啥用處,可是實際上這裏用處還挺多的ios
1
2
3
|
export
default
{
name:
'xxx'
}
|
1.當項目使用keep-alive時,可搭配組件name進行緩存過濾json
舉個例子:axios
咱們有個組件命名爲detail,其中dom加載完畢後咱們在鉤子函數mounted中進行數據加載緩存
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
export
default
{
name:
'Detail'
},
mounted(){
this
.getInfo();
},
methods:{
getInfo(){
axios.get(
'/xx/detail.json'
,{
params:{
id:
this
.$route.params.id
}
}).then(
this
.getInfoSucc)
}
}
|
由於咱們在App.vue中使用了keep-alive致使咱們第二次進入的時候頁面不會從新請求,即觸發mounted函數。app
有兩個解決方案,一個增長activated()函數,每次進入新頁面的時候再獲取一次數據。dom
還有個方案就是在keep-alive中增長一個過濾,以下圖所示:函數
1
2
3
4
5
|
<div id=
"app"
>
<keep-alive exclude=
"Detail"
>
<router-view/>
</keep-alive>
</div>
|
2.DOM作遞歸組件時工具
好比說detail.vue組件裏有個list.vue子組件,遞歸迭代時須要調用自身namethis
list.vue:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<div>
<div v-
for
=
"(item,index) of list"
:key=
"index"
>
<div>
<span class=
"item-title-icon"
></span>
{{item.title}}
</div>
<div v-
if
=
"item.children"
>
<detail-list :list=
"item.children"
></detail-list>
</div>
</div>
</div>
<script>
export
default
{
name:
'DetailList'
,
//遞歸組件是指組件自身調用自身
props:{
list:Array
}
}
</script>
|
list數據:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const list = [{
"title"
:
"A"
,
"children"
: [{
"title"
:
"A-A"
,
"children"
: [{
"title"
:
"A-A-A"
}]
},{
"title"
:
"A-B"
}]
}, {
"title"
:
"B"
}, {
"title"
:
"C"
}, {
"title"
:
"D"
}]
|
迭代的結果以下:
3.當你用vue-tools時
vue-devtools調試工具裏顯示的組見名稱是由vue中組件name決定的