VUE3學習教程之全域性元件和區域性元件

阿新 • • 發佈：2022-01-21

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

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

VUE3學習教程之全域性元件和區域性元件

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>
        `
    });

VUE3學習教程之全域性元件和區域性元件

2.4 元件的複用

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

從這個例子能看出來，元件的好處就是可以複用，且元件中的變數是獨享的。

VUE3學習教程之全域性元件和區域性元件

2.5 元件中使用元件

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

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

VUE3學習教程之全域性元件和區域性元件

2.6 總結

全域性元件，使用起來很簡單，只需要使用 app.component 函式宣告一下即可。

一個全域性元件可以被另一個全域性元件使用。

但全域性元件，只要宣告，即使不使用也會被初始化，影響效能。

3. 區域性元件

3.1 區域性元件的使用

<bodyhttp://www.cppcns.com>
    <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");

區域性元件的寫法是，首先宣告一個物件，內容和全域性元件類似，然後將元件與物件做一個對映。

VUE3學習教程之全域性元件和區域性元件

3.2 總結

區域性元件宣告的物件建議首字母大寫，單詞間使用駝峰命名。

對映時，元件的名稱還保持全小寫字母，單詞之間使用 “-” 連線。

區域性元件，如果不使用，就不會初始化，因此對效能有好處。

附：vue 3 元件的分類全域性元件與區域性元件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元件的分類</title>
    <script src="/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-hello></my-hello>
        <my-world></my-world>
    </div>

    <script>
        /**
         * 全域性元件，可以在所有vue例項中使用
         */
        Vue.component('my-hello',{
            template:'<h3>{{name}}</h3>',data:function(){ //在元件中儲存資料時，必須以函式形式，函式返回一個物件
                return {
                    name:'alice'
                }
            }
        });

        /**
         * 區域性元件，只能在當前vue例項中使用
         */
        var vm=new Vue({
            el:'#itany',data:{
                name:'tom'
            },components:{ //區域性元件
                'my-world':{
                    template:'<h3>{{age}}</h3>',data(){
                        return {
                            age:25
                        }
                    }
                }
            }
        });    
    </script>
</body>
</html>