Vue?export?default中的name屬性有哪些作用
更新時間：2022年03月31日 09:06:59 作者：葉孤崖
這篇文章主要介紹了Vue?export?default中的name屬性有哪些作用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue export default的name屬性作用
在劃分模塊和創(chuàng)建單頁面組件時，常常寫到name。嵌套路由中，index.vue極為常見。
那么在vue中，export default { name: ‘xxx’} 中的name到底有啥作用呢？
還是先回到官方的文檔：官方鏈接
官方文檔已經(jīng)給我們描述了兩種使用情況，可能在開發(fā)中，并不是常用，舉例子說明一下。
1.組件自身的遞歸調(diào)用
就是在當前組件中，調(diào)用組件自己
componentA.vue
<template>
<div class="component-a">
<!-- 一個簡單的樹形組件 -->
<tree :treeData="treeData"></tree>
</div>
</template>
<script>
export default {
name: 'component-a',
data() {
return {
treeData: [{
title: '樹形標題一',
expand: true,
children: [{
title: '子標題1',
expand: true
},
{
title: '子標題2',
expand: true,
children: [{
title: '子標題2.1',
expand: true
},
{
title: '子標題2.2',
expand: true
},
{
title: '子標題2.3',
expand: true
}]
}]
}
},
components: {
// 自定義組件
tree: {
// 組件的名稱
name: 'tree',
// 模板
template: `
<ul>
<li v-for="item in treeData">
<span>{{item.title}}</span>
<!-- 在組件內(nèi)部調(diào)用自己 -->
<tree v-if="item.children" :treeData="item.children"></tree >
</li>
</ul>`,
// 通過父組件傳遞的數(shù)據(jù)
props: ['treeData']
}
},
methods: {}
}
</script>
2.當我們使用vue.js官方提供的調(diào)試工具調(diào)試
可以看到組件的名稱，更好地定位
3.最后一種應該是使用比較多的情況
就是當我們使用 keep-alive時可以使用include和exclude指定需要緩存和不需要緩存的組件。指定的依據(jù)就是組件的name。
這就是vue.js中組件export default 中name的三種作用。調(diào)試和keep-alive是我們開發(fā)中常用的功能，關于組件的遞歸調(diào)用，還是第一次實踐，遞歸時，大家一定要注意遞歸的條件，否則會進入死循環(huán)。
Vue如何獲取組件name屬性
Vue在編寫組件時一般都會顯式的指明其name屬性
獲取name屬性
this.$options.name
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
當一個頁面需要加載較多個組件時,并且組件自身又比較復雜,如果一次性加載,可能等待時間較長,體驗不好,這個時候就需要延遲加載了,本文為大家介紹了Vue2實現(xiàn)組件延遲加載的示例代碼,需要的可以參考下2024-01-01
這篇文章主要介紹了Vue響應式系統(tǒng)之嵌套，我們在開發(fā)中肯定存在組件嵌套組件的情況，下文將舉例說明情況，需要的小伙伴可以參考一下2022-04-04
今天小編就為大家分享一篇vue--點擊當前增加class,其他刪除class的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue.js的組件的使用有3個步驟：創(chuàng)建組件構造器、注冊組件和使用組件。這篇文章主要介紹了vue 注冊組件的使用,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-05-05
最近一直在做 Vue項目代碼層面上的優(yōu)化，寫文章是很easy的事情，今天小編給大家分享Vue.js 父子組件通信的十種方式，感興趣的的朋友跟隨小編一起看看吧2018-10-10
圖片裁剪功能無論是用戶頭像的裁剪,還是圖片內(nèi)容的精確調(diào)整,都成為了提升用戶體驗的關鍵一環(huán),本文將詳細介紹如何在Vue.js項目中集成并使用Cropper.js實現(xiàn)一個強大的圖片裁剪組件,需要的可以參考下2024-11-11
Vue3提了一個Ref?Sugar的RFC，即ref語法糖，目前還處理實驗性的(Experimental)階段，今天通過本文給大家介紹vue3中使用ref語法糖的相關知識，感興趣的朋友跟隨小編一起看看吧2022-09-09
這篇文章主要介紹了vue計算屬性get和set用法,結合實例形式分析了計算屬性的功能及get和set用法的具體使用技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了vue子父組件通信的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-07-07
本篇文章主要介紹了淺談vue.js中v-for循環(huán)渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07