在多次使用到相同的函式和相同的HTML程式碼時，可以考慮抽取為元件。想用就呼叫，想改就傳Dnnrshi參，就是元件的好處。

什麼是元件

用面向物件的思維去理解元件，可以將所有的事物都抽象為物件，而類或者說是元件，都具有屬性和操作。

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

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

在面向物件中，建構函式可以為類初始化全域性變數，所以這種方式同樣可以用在元件中

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

元件封裝了資料以及操作，有進則有出，我們不用關心元件內發生了什麼，我們只需要結果和呈現出來的效果如何。

自定義事件

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

使用$emit自定義事件，可以實現外界獲取元件屬性。

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

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

外界呼叫元件時新增自定義函式@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>

實際案例

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

所以可以將標籤相關的HTML程式碼和封裝到元件中，對外，我們暴露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，呈現的效果如下：

到此這篇關於淺析從面向物件思維理解Vue元件的文章就介紹到這了,更多相關Vue元件面向物件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！