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

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

 更新時(shí)間：2022年01月19日 10:14:27   作者：追風(fēng)人聊Java  
組件（Component）是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展?HTML?元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于VUE3學(xué)習(xí)教程之全局組件和局部組件的相關(guān)資料,需要的朋友可以參考下

1. 概述

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

言歸正傳，今天我們來(lái)聊聊 VUE 的全局組件與局部組件。

2. 全局組件

2.1 不使用組件的寫(xiě)法

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

這是我們之前不使用組件的寫(xiě)法，接下來(lái)我們用組件去實(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ī)范：建議使用全小寫(xiě)字母，單詞之間使用 “-” 連接。

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è)例子能看出來(lái)，組件的好處就是可以復(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 />
        `
    });

我們?cè)诹硪粋€(gè)組件 count-com-2 中使用 count-com 組件，也是可以的。

2.6 總結(jié)

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

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

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

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

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

3.2 總結(jié)

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

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

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

附：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(){ //在組件中存儲(chǔ)數(shù)據(jù)時(shí)，必須以函數(shù)形式，函數(shù)返回一個(gè)對(duì)象
                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 的 全局組件與局部組件，希望可以對(duì)大家的工作有所幫助

到此這篇關(guān)于VUE3學(xué)習(xí)教程之全局組件和局部組件的文章就介紹到這了,更多相關(guān)VUE3全局組件和局部組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論