VUE3 之全局組件與局部組件

本文轉載自查看原文 2022-01-15 17:21 1084 VUE3/ VUE/ 前端/ js/ javascript

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");