欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中組件的name屬性含義和用法示例

 更新時(shí)間:2022年12月13日 11:29:39   作者:the-lucky-one  
組件是有name屬性的,匹配的就是組件的name,下面這篇文章主要給大家介紹了關(guān)于vue中組件的name屬性含義和用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

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é)果:

請(qǐng)?zhí)砑訄D片描述

3、應(yīng)用二:使用 keep-alive 時(shí),搭配組件 name 進(jìn)行緩存過濾

使用 keep-alive時(shí),可使用includeexclude依據(jù)name屬性來(lái)指定:是否緩存組件。

動(dòng)態(tài)組件keep-alivename屬性關(guān)系看另一篇:

4、應(yīng)用三:vue-devtools 調(diào)試工具

vue-devtools 調(diào)試工具中,顯示的組見名稱由組件name屬性決定

好處:可看到組件名稱更好的定位

例:

請(qǐng)?zhí)砑訄D片描述

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)文章

  • vue3 element的Form表單用法實(shí)例

    vue3 element的Form表單用法實(shí)例

    這篇文章主要為大家介紹了vue3中element的Form表單用法實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • Vue.js進(jìn)階知識(shí)點(diǎn)總結(jié)

    Vue.js進(jìn)階知識(shí)點(diǎn)總結(jié)

    給大家分享了關(guān)于Vue.js想成為高手的5個(gè)總要知識(shí)點(diǎn),需要的朋友可以學(xué)習(xí)下。
    2018-04-04
  • vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn)

    vue-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-09
  • Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例

    Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例

    防抖節(jié)流是可以說是一種優(yōu)化組件性能的技巧,可以有效減少組件中的渲染次數(shù)和計(jì)算量,本文主要介紹了Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例,感興趣的可以了解一下
    2024-04-04
  • vue3中Fragment特性的一個(gè)bug需要注意事項(xiàng)

    vue3中Fragment特性的一個(gè)bug需要注意事項(xiàng)

    這篇文章主要介紹了vue3中Fragment特性的一個(gè)bug,需要留意的注意事項(xiàng)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2024-01-01
  • Vue路由應(yīng)用詳細(xì)講解

    Vue路由應(yīng)用詳細(xì)講解

    路由的本質(zhì)就是一種對(duì)應(yīng)關(guān)系,根據(jù)不同的URL請(qǐng)求,返回對(duì)應(yīng)不同的資源。那么url地址和真實(shí)的資源之間就有一種對(duì)應(yīng)的關(guān)系,就是路由
    2022-11-11
  • vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)是否填入的彈窗提示

    vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)是否填入的彈窗提示

    表格判斷在很多項(xiàng)目中都用得到,本文主要介紹了vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)是否填入的彈窗提示,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-11-11
  • vue?v-for中key的原理詳析

    vue?v-for中key的原理詳析

    key屬性可以用來(lái)提升v-for渲染的效率,vue中使用v-for渲染數(shù)據(jù)的時(shí)候,并不會(huì)去改變?cè)械脑睾蛿?shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue?v-for中key原理的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • Vue computed計(jì)算屬性詳細(xì)講解

    Vue computed計(jì)算屬性詳細(xì)講解

    computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下
    2022-10-10
  • Vue中引入json的三種方式總結(jié)

    Vue中引入json的三種方式總結(jié)

    這篇文章主要介紹了Vue中引入json的三種方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05

最新評(píng)論