不一樣的角度理解Vue元件

kongsam發表於2021-04-25
Vue元件

什麼是元件

以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，呈現的效果如下：

相關文章