不一樣的角度理解Vue元件

kongsam發表於2021-04-25

什麼是元件

以Java、C#等物件導向程式語言的角度去理解Vue元件,能夠發現元件和麵向物件程式設計的方式和風格很相似。一切事物皆為物件,通過物件導向的方式,將現實世界的事物抽象成物件,現實世界中的關係抽象成類、繼承。

在物件導向程式語言中,類(元件)具有屬性,它是物件的狀態的抽象;類(元件)具有操作,它是物件的行為的抽象。

將“類”與“元件”置換之後,如果沒有感覺違和,恭喜你,已經對元件有了深刻的認識。

比如將人類這一物件抽取為一個元件,基本的屬性有:姓名、年齡、國籍;基本的方法有:吃飯、睡覺、跑步等。

對外我們需要暴露(getter)姓名、年齡、國籍三個屬性,並可以由外部對元件屬性進行初始化(setter)。

<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>

在使用元件時,通過傳參的方式為元件傳遞值。

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

對外公開介面,將資料與運算元據的原始碼進行有機的結合,形成“元件”,其中資料和函式都是元件的成員。

因為元件已經封裝了資料以及運算元據的過程,所以我們不需要關注元件內部的方法是如何實現的,或者說,我們不用關心元件內發生了什麼,我們只需要給它資料,而它給我們結果就行。

自定義事件

但是,外部不可以直接訪問屬性值,如果我想獲取person元件相關的屬性,該如何做?

答案是使用$emit自定義事件

修改button的點選事件函式:

<button @click="handleClick">點選</button>

新增處理點選事件的函式:

export default {
    name: 'person',
    methods: {
        handleClick() {
            this.$emit('getAll', {
                age: this.age,
                name: this.name,
                country: this.country
            })
        }
    }
}

在使用元件時,對元件新增自定義函式@getAll

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

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

測試程式碼提取地址,提取碼:pvcq

實際案例

在網頁開發中,你可能會用到標籤,而你可能會想到標籤不可能在一個頁面使用一次,可能是多次使用到。你還可能會想到因為不同的情況而自定義一些寬度、高度和顏色。

所以可以將標籤相關的HTML程式碼和CSS封裝到元件中,對外,我們暴露width、height和type引數。在使用時,因為不同的情況而需要自定義,那麼傳遞引數即可。

<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>

這些工作做好了,一個元件就被我們定義好了。想用就呼叫,想改就傳參,這就是元件的好處。

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

改變type的值為gray,呈現的效果如下:

相關文章