vue中組件的name屬性含義和用法示例
更新時間：2022年12月13日 11:29:39 作者：the-lucky-one
組件是有name屬性的,匹配的就是組件的name,下面這篇文章主要給大家介紹了關于vue中組件的name屬性含義和用法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
name屬性：只有作為組件選項時起作用，用來注冊組件名
1、注冊組件名
局部注冊組件，語法：export default{ components:{"組件名":組件對象}}
其中，"組件名"注冊方法：
方法一：隨便取名，
例：export default{components:{"ComMy"：{template:'<h1><h1>'}}隨便取名為：ComMy
方法二：用組件對象中的name屬性值
組件對象name屬性：是指要引用的子組件對象，向外暴露的name屬性
例：
file1.vue中：組件中定義name屬性和name屬性值
<script>
export default{
name:"ComNameHello"
}
</script>
file2.vue中：創(chuàng)建組件–>引用組件–>注冊組件–>使用組件
// 1.創(chuàng)建組件
<template>
<div>
<ComNameHello></ComNameHello> //4.使用組件 可使用組件file1.vue
</div>
</template>
<script>
import ComName from "./file1.vue" //2.引用組件 ComName為file1.vue的組件對象
export default{
componemts:{ // 3.注冊組件
[ComName.name]: ComName
// ComName.name用來獲?。篺ile1.vue的組件對象的name屬性值，
// -->是一個字符串"ComNameHello"，
// -->被用做：組件名
// key是變量，必須用“[]”包起來
// ComName 是組件對象
// 即：components:{"組件名":組件對象}
}
}
</script>
2、應用一：遞歸組件
遞歸組件：組件在當前自身組件中，調用自身組件
例：
<template>
<div >
<h1>組件遞歸</h1>
// 使用子組件ComChild
<com-child :list="list"></com-child> // 向子組件傳遞數據
</div>
</template>
<script>
export default {
name: 'ComList',
data() {
return {
list: [{
title: 'A',
children: [{
title: 'A_A1',
},{
title: 'A_A2',
children: [{
title: 'A_A2_A1',
},{
title: 'A_A2_A2',
}]
}]
},{
"title": "B"
},{
"title": "C"
}]
}
},
components: {
ComChild: { // 自定義子組件
name: 'ComChild',
// 模板
// 在組件內部調用自己
// （1）:list="list" --> 即：變量list="來自父組件的值"
// （2）使用v-for遞歸組件時-->需在當前組件（組件名'ComList'）中，
// -->調用自身組件<com-child>
template: `
<ul>
<li v-for="(item,index) in list" :key="index">
<span>{{item.title}}</span>
<com-child v-if="item.children" :list="item.children"></com-child>
</li>
</ul>`,
props: ['list'] // 父組件傳遞來的數據
}
}
}
</script>
輸出結果：
3、應用二：使用 keep-alive 時，搭配組件 name 進行緩存過濾
使用 keep-alive時，可使用include和exclude依據name屬性來指定：是否緩存組件。
動態(tài)組件keep-alive與name屬性關系看另一篇：
4、應用三：vue-devtools 調試工具
vue-devtools 調試工具中，顯示的組見名稱由組件name屬性決定
好處：可看到組件名稱更好的定位
例：
5、獲取name屬性
this.$options.name
補充：需要特別注意的是
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{
components: {
'header': header
}
};
總結
到此這篇關于vue中組件的name屬性含義和用法的文章就介紹到這了,更多相關vue組件name屬性用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了vue3中element的Form表單用法實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
給大家分享了關于Vue.js想成為高手的5個總要知識點，需要的朋友可以學習下。2018-04-04
這篇文章主要介紹了vue-loader中引入模板預處理器的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
防抖節(jié)流是可以說是一種優(yōu)化組件性能的技巧,可以有效減少組件中的渲染次數和計算量,本文主要介紹了Vue3項目中使用防抖節(jié)流的實現示例,感興趣的可以了解一下2024-04-04
這篇文章主要介紹了vue3中Fragment特性的一個bug，需要留意的注意事項示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2024-01-01
路由的本質就是一種對應關系，根據不同的URL請求，返回對應不同的資源。那么url地址和真實的資源之間就有一種對應的關系，就是路由2022-11-11
表格判斷在很多項目中都用得到,本文主要介紹了vue設置必填項和判斷必填項是否填入的彈窗提示,具有一定的參考價值,感興趣的可以了解一下2023-11-11
key屬性可以用來提升v-for渲染的效率,vue中使用v-for渲染數據的時候,并不會去改變原有的元素和數據,下面這篇文章主要給大家介紹了關于vue?v-for中key原理的相關資料,需要的朋友可以參考下2022-04-04
computed是vue的配置選項,它的值是一個對象,其中可定義多個計算屬性,每個計算屬性就是一個函數,下面這篇文章主要給大家介紹了關于vue中計算屬性computed的詳細講解,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue中引入json的三種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05