本篇內(nèi)容主要講解“Vue組件是什么及怎么應(yīng)用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue組件是什么及怎么應(yīng)用”吧!

成都創(chuàng)新互聯(lián)是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計(jì)公司的優(yōu)秀設(shè)計(jì)人員和策劃人員組成的一個(gè)具有豐富經(jīng)驗(yàn)的團(tuán)隊(duì)，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計(jì)師、平面廣告設(shè)計(jì)師、網(wǎng)絡(luò)營銷人員及形象策劃。承接：成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價(jià)比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺(tái)等全方位的服務(wù)。

什么是組件

用面向?qū)ο蟮乃季S去理解Vue組件，可以將所有的事物都抽象為對象，而類或者說是組件，都具有屬性和操作。

如抽取人類為組件，其基本的屬性有姓名、年齡、國籍；基本的方法有吃飯、睡覺、跑步等。

<script>
export default {
    name: "person",
    props: {
        name: {
            type: String,
            required: false,
            default: "無名氏"
        },
        age: {
            type: Number,
            required: false,
            default: 0
        },
        country: {
            type: String,
            required: false,
            default: "地球人"
        }
    },
    methods: {
        eat() {
            consloe.log("吃飯")
        },
        sleep() {
            consloe.log("睡覺")
        },
        run() {
            consloe.log("跑步")
        }
    }
}
</script>

在面向?qū)ο笾校瑯?gòu)造函數(shù)可以為類初始化全局變量，所以這種方式同樣可以用在組件中

<person :age="20" :name=""小明"" :country=""中國人""></person>

組件封裝了數(shù)據(jù)以及操作，有進(jìn)則有出，我們不用關(guān)心組件內(nèi)發(fā)生了什么，我們只需要結(jié)果和呈現(xiàn)出來的效果如何。

自定義事件

外界不可以直接訪問使用或訪問組件的屬性，該如何做？

使用$emit自定義事件，可以實(shí)現(xiàn)外界獲取組件屬性。

<template>
    ...
    <button @click="handleClick">點(diǎn)擊</button>
</template>

<script>
export default {
    name: "person",
    methods: {
        handleClick() {
            this.$emit("getPerson", {
                age: this.age,
                name: this.name,
                country: this.country
            })
        }
    }
}
</script>

外界調(diào)用組件時(shí)添加自定義函數(shù)@getPerson或v-on:click="getPerson"

<template>
    <div>
        <person :age="20" :name=""小明"" :country=""中國人"" @getPerson="getPerson"></person>
    </div>
</template>

<script>
export default {
    name: "test",
    methods: {
        getPerson(info) {
            consloe.log(info)
        }
    }
}
</script>

實(shí)際案例

在網(wǎng)頁開發(fā)中，你可能會(huì)用到標(biāo)簽，而你可能會(huì)想到標(biāo)簽不可能在一個(gè)頁面使用一次，可能是多次使用到。你還可能會(huì)想到因?yàn)椴煌那闆r而自定義一些寬度、高度和顏色。

所以可以將標(biāo)簽相關(guān)的HTML代碼和CSS封裝到組件中，對外，我們暴露width、height和type參數(shù)。在使用時(shí)，因?yàn)椴煌那闆r而需要自定義，那么傳遞參數(shù)即可。

<template>
    <view
        :style="{ width: width, height: height }"
        :class="["owl-tag-" + type]"
        class="owl-tag text-xs flex align-center justify-center"
    >
        <slot></slot>
    </view>
</template>

<script>
    name: "owl-tag",
    props: {
        // 可傳入有效值為 primary | gray
        type: {
            type: String,
            default: "primary"
        },
        width: {
            type: String,
            required: false
        },
        height: {
            type: String,
            required: false
        }
    }
</script>

<style>
.owl-tag {
    border-radius: 8rpx;
    padding: 6rpx 10rpx;
}

.owl-tag-primary {
    color: white;
    background-color: #87cefa;
}

.owl-tag-gray {
    color: #81868a;
    background-color: #f0f1f5;
}
</style>

這些工作做好了，一個(gè)組件就被我們定義好了。想用就調(diào)用，想改就傳參，這就是組件的好處。

<template>
    <owl-tag
        :type=""primary""
        :height=""45rpx""
        :width=""120rpx""
    >
        官方帖
    </owl-tag>
</template>

到此，相信大家對“Vue組件是什么及怎么應(yīng)用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章標(biāo)題：Vue組件是什么及怎么應(yīng)用
分享URL：http://chinadenli.net/article44/geoihe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站營銷、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、用戶體驗(yàn)、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)