VUE3 之 全局組件與局部組件

1. 概述

老話說的好:忍耐是一種策略,同時也是一種性格磨鍊。

 

言歸正傳,今天我們來聊聊 VUE 的全局組件與局部組件。

 

2. 全局組件

2.1 不使用組件的寫法 

<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({
        template:`
            <div>
                <div>hello</div>
                <div>zhuifengren</div>
            </div>
        `
    });
    const vm = app.mount("#myDiv");

這是我們之前不使用組件的寫法,接下來我們用組件去實現相同的效果。

 

2.2 使用組件

    const app = Vue.createApp({
        template:`
            <div>
                <hello-com />
                <zhuifengren-com />
            </div>
        `
    });

    app.component('hello-com', {
        template: `
            <div>hello</div>
        `
    });

    app.component('zhuifengren-com', {
        template: `
            <div>zhuifengren</div>
        `
    });

我們把之前的 <div>hello</div> 和 <div>zhuifengren</div> 分別封裝在了組件中,然後直接將組件名作為標籤即可。

組件名稱的命名規範:建議使用全小寫字母,單詞之間使用 「-」 連接。

 

2.3 組件中包含變量

    const app = Vue.createApp({
        template:`
            <div>
                <count-com />
            </div>
        `
    });
    app.component('count-com', {
        data() {
            return {
                count : 1
            }
        },
        template: `
            <div>{{count}}</div>
            <button @click="count += 1">加1</button>
        `
    });

 

 

2.4 組件的復用

    const app = Vue.createApp({
        template:`
            <div>
                <count-com />
                <count-com />
                <count-com />
            </div>
        `
    });

從這個例子能看出來,組件的好處就是可以復用,且組件中的變量是獨享的。

 

2.5 組件中使用組件

    const app = Vue.createApp({
        template:`
            <div>
                <count-com />
                <count-com />
                <count-com />
                <count-com-2 />
            </div>
        `
    });
    app.component('count-com-2', {
        template: `
            <count-com />
        `
    });

我們在另一個組件 count-com-2 中使用 count-com 組件,也是可以的。

 

 

2.6 總結

全局組件,使用起來很簡單,只需要使用 app.component 函數聲明一下即可。

一個全局組件可以被另一個全局組件使用。

但全局組件,只要聲明,即使不使用也會被初始化,影響性能。

 

3. 局部組件

3.1 局部組件的使用

<body>
    <div id="myDiv"></div>
</body>
<script>
    const CountCom = {
        data() {
            return {
                count : 1
            }
        },
        template: `
            <div>{{count}}</div>
            <button @click="count += 1">自增</button>
        `
    }
    const app = Vue.createApp({

        // 組件映射
        components : {
            'count-com': CountCom
        },
        template:`
            <div>
                <count-com/>
            </div>
        `
    });

    const vm = app.mount("#myDiv");

局部組件的寫法是,首先聲明一個對象,內容和全局組件類似,然後將組件與對象做一個映射。

 

3.2 總結

局部組件聲明的對象建議首字母大寫,單詞間使用駝峰命名。

映射時,組件的名稱還保持全小寫字母,單詞之間使用 「-」 連接。

局部組件,如果不使用,就不會初始化,因此對性能有好處。

 

4. 綜述

今天聊了一下 VUE3 的 全局組件與局部組件,希望可以對大家的工作有所幫助

歡迎幫忙點贊、評論、轉發、加關注 :)

關注追風人聊Java,每天更新Java乾貨。

 

5. 個人公眾號

追風人聊Java,歡迎大家關注