日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 Vue 正文

VUE3學(xué)習(xí)教程之全局組件和局部組件_vue.js

作者：追風(fēng)人聊Java ? 更新時(shí)間： 2022-03-31 Vue

1. 概述

老話說的好：忍耐是一種策略，同時(shí)也是一種性格磨煉。

言歸正傳，今天我們來聊聊 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");

這是我們之前不使用組件的寫法，接下來我們用組件去實(shí)現(xiàn)相同的效果。

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> 分別封裝在了組件中，然后直接將組件名作為標(biāo)簽即可。

組件名稱的命名規(guī)范：建議使用全小寫字母，單詞之間使用 “-” 連接。

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 組件的復(fù)用

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

從這個(gè)例子能看出來，組件的好處就是可以復(fù)用，且組件中的變量是獨(dú)享的。

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

我們在另一個(gè)組件 count-com-2 中使用 count-com 組件，也是可以的。

2.6 總結(jié)

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

一個(gè)全局組件可以被另一個(gè)全局組件使用。

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

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

局部組件的寫法是，首先聲明一個(gè)對象，內(nèi)容和全局組件類似，然后將組件與對象做一個(gè)映射。

3.2 總結(jié)

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

映射時(shí)，組件的名稱還保持全小寫字母，單詞之間使用 “-” 連接。

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

附：vue 3 組件的分類 全局組件與局部組件

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

    <script>
        /**
         * 全局組件，可以在所有vue實(shí)例中使用
         */
        Vue.component('my-hello',{
            template:'<h3>{{name}}</h3>',
            data:function(){ //在組件中存儲數(shù)據(jù)時(shí)，必須以函數(shù)形式，函數(shù)返回一個(gè)對象
                return {
                    name:'alice'
                }
            }
        });

        /**
         * 局部組件，只能在當(dāng)前vue實(shí)例中使用
         */
        var vm=new Vue({
            el:'#itany',
            data:{
                name:'tom'
            },
            components:{ //局部組件
                'my-world':{
                    template:'<h3>{{age}}</h3>',
                    data(){
                        return {
                            age:25
                        }
                    }
                }
            }
        });    
    </script>
</body>
</html>

總結(jié)

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

原文鏈接：https://www.cnblogs.com/w84422/p/15807181.html

欄目分類
最近更新