vue中組件的name屬性含義和用法示例
前言
name屬性:只有作為組件選項(xiàng)時(shí)起作用,用來(lái)注冊(cè)組件名
1、注冊(cè)組件名
局部注冊(cè)組件,語(yǔ)法:export default{ components:{"組件名":組件對(duì)象}}
其中,"組件名"
注冊(cè)方法:
方法一:隨便取名,
例:export default{components:{"ComMy":{template:'<h1><h1>'}}
隨便取名為:ComMy
方法二:用組件對(duì)象中的name屬性值
組件對(duì)象name屬性:是指要引用的子組件對(duì)象,向外暴露的name屬性
例:
file1.vue中:組件中定義name屬性和name屬性值
<script> export default{ name:"ComNameHello" } </script>
file2.vue中:創(chuàng)建組件–>引用組件–>注冊(cè)組件–>使用組件
// 1.創(chuàng)建組件 <template> <div> <ComNameHello></ComNameHello> //4.使用組件 可使用組件file1.vue </div> </template> <script> import ComName from "./file1.vue" //2.引用組件 ComName為file1.vue的組件對(duì)象 export default{ componemts:{ // 3.注冊(cè)組件 [ComName.name]: ComName // ComName.name用來(lái)獲取:file1.vue的組件對(duì)象的name屬性值, // -->是一個(gè)字符串"ComNameHello", // -->被用做:組件名 // key是變量,必須用“[]”包起來(lái) // ComName 是組件對(duì)象 // 即:components:{"組件名":組件對(duì)象} } } </script>
2、應(yīng)用一:遞歸組件
遞歸組件:組件在當(dāng)前自身組件中,調(diào)用自身組件
例:
<template> <div > <h1>組件遞歸</h1> // 使用子組件ComChild <com-child :list="list"></com-child> // 向子組件傳遞數(shù)據(jù) </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', // 模板 // 在組件內(nèi)部調(diào)用自己 // (1):list="list" --> 即:變量list="來(lái)自父組件的值" // (2)使用v-for遞歸組件時(shí)-->需在當(dāng)前組件(組件名'ComList')中, // -->調(diào)用自身組件<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'] // 父組件傳遞來(lái)的數(shù)據(jù) } } } </script>
輸出結(jié)果:
3、應(yīng)用二:使用 keep-alive 時(shí),搭配組件 name 進(jìn)行緩存過濾
使用 keep-alive
時(shí),可使用include
和exclude
依據(jù)name屬性
來(lái)指定:是否緩存組件。
動(dòng)態(tài)組件keep-alive
與name屬性
關(guān)系看另一篇:
4、應(yīng)用三:vue-devtools 調(diào)試工具
vue-devtools 調(diào)試工具中,顯示的組見名稱由組件name屬性決定
好處:可看到組件名稱更好的定位
例:
5、獲取name屬性
this.$options.name
補(bǔ)充:需要特別注意的是
name的使用過程中報(bào)錯(cuò)
[Vue warn]: Do not use built-in or reserved HTML elements as component id: ****
解決辦法:
在component里面注冊(cè)組件的時(shí)候避免用html已有的標(biāo)簽來(lái)接收組件;
import header from '@/components/header/header'; export default{ components: { 'header': header } };
總結(jié)
到此這篇關(guān)于vue中組件的name屬性含義和用法的文章就介紹到這了,更多相關(guān)vue組件name屬性用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue.js進(jìn)階知識(shí)點(diǎn)總結(jié)
給大家分享了關(guān)于Vue.js想成為高手的5個(gè)總要知識(shí)點(diǎn),需要的朋友可以學(xué)習(xí)下。2018-04-04vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn)
這篇文章主要介紹了vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例
防抖節(jié)流是可以說是一種優(yōu)化組件性能的技巧,可以有效減少組件中的渲染次數(shù)和計(jì)算量,本文主要介紹了Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-04-04vue3中Fragment特性的一個(gè)bug需要注意事項(xiàng)
這篇文章主要介紹了vue3中Fragment特性的一個(gè)bug,需要留意的注意事項(xiàng)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)是否填入的彈窗提示
表格判斷在很多項(xiàng)目中都用得到,本文主要介紹了vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)是否填入的彈窗提示,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11