淺析從面向對象思維理解Vue組件
在多次使用到相同的函數和相同的HTML代碼時,可以考慮抽取為組件。想用就調用,想改就傳參,就是組件的好處。
什麼是組件
用面向對象的思維去理解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>
在面向對象中,構造函數可以為類初始化全局變量,所以這種方式同樣可以用在組件中
<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代碼和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,呈現的效果如下:
到此這篇關於淺析從面向對象思維理解Vue組件的文章就介紹到這瞭,更多相關Vue組件面向對象內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!