淺析從面向?qū)ο笏季S理解Vue組件
在多次使用到相同的函數(shù)和相同的HTML代碼時(shí)，可以考慮抽取為組件。想用就調(diào)用，想改就傳參，就是組件的好處。
什么是組件
用面向?qū)ο蟮乃季S去理解Vue組件，可以將所有的事物都抽象為對(duì)象，而類或者說(shuō)是組件，都具有屬性和操作。
如抽取人類為組件，其基本的屬性有姓名、年齡、國(guó)籍；基本的方法有吃飯、睡覺(jué)、跑步等。
<script>
export default {
name: 'person',
props: {
name: {
type: String,
required: false,
default: '無(wú)名氏'
},
age: {
type: Number,
required: false,
default: 0
},
country: {
type: String,
required: false,
default: '地球人'
}
},
methods: {
eat() {
consloe.log('吃飯')
},
sleep() {
consloe.log('睡覺(jué)')
},
run() {
consloe.log('跑步')
}
}
}
</script>
在面向?qū)ο笾?，?gòu)造函數(shù)可以為類初始化全局變量，所以這種方式同樣可以用在組件中
<person :age="20" :name="'小明'" :country="'中國(guó)人'"></person>
組件封裝了數(shù)據(jù)以及操作，有進(jìn)則有出，我們不用關(guān)心組件內(nèi)發(fā)生了什么，我們只需要結(jié)果和呈現(xiàn)出來(lái)的效果如何。
自定義事件
外界不可以直接訪問(wèn)使用或訪問(wè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="'中國(guó)人'" @getPerson="getPerson"></person>
</div>
</template>
<script>
export default {
name: 'test',
methods: {
getPerson(info) {
consloe.log(info)
}
}
}
</script>
實(shí)際案例
在網(wǎng)頁(yè)開發(fā)中，你可能會(huì)用到標(biāo)簽，而你可能會(huì)想到標(biāo)簽不可能在一個(gè)頁(yè)面使用一次，可能是多次使用到。你還可能會(huì)想到因?yàn)椴煌那闆r而自定義一些寬度、高度和顏色。
所以可以將標(biāo)簽相關(guān)的HTML代碼和CSS封裝到組件中，對(duì)外，我們暴露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>
改變type的值為gray，呈現(xiàn)的效果如下：
到此這篇關(guān)于淺析從面向?qū)ο笏季S理解Vue組件的文章就介紹到這了,更多相關(guān)Vue組件面向?qū)ο髢?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue異步請(qǐng)求數(shù)據(jù)重新渲染方式
這篇文章主要介紹了vue異步請(qǐng)求數(shù)據(jù)重新渲染方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
本文主要介紹了vue實(shí)現(xiàn)列表拖拽排序的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要給大家介紹了關(guān)于Vite使用報(bào)錯(cuò)解決方法的相關(guān)資料,這篇文中通過(guò)圖文以及代碼將遇到的一些報(bào)錯(cuò)介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vite具有一定的借鑒價(jià)值,需要的朋友可以參考下2023-08-08
解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況
這篇文章主要介紹了解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue實(shí)現(xiàn)超過(guò)兩行顯示展開收起的代碼
這篇文章主要介紹了vue實(shí)現(xiàn)超過(guò)兩行顯示展開收起的代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
單元測(cè)試是用來(lái)測(cè)試項(xiàng)目中的一個(gè)模塊的功能，本文主要介紹了前端Vue單元測(cè)試入門教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue中table多選/單選行,獲取其數(shù)據(jù)方式
這篇文章主要介紹了vue中table多選/單選行,獲取其數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue實(shí)現(xiàn)后臺(tái)管理權(quán)限系統(tǒng)及頂欄三級(jí)菜單顯示功能
這篇文章主要介紹了vue實(shí)現(xiàn)后臺(tái)管理權(quán)限系統(tǒng)及頂欄三級(jí)菜單顯示功能，本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
基于Vue3實(shí)現(xiàn)數(shù)字華容道游戲的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue編寫一個(gè)數(shù)字華容道游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳解vue-cli快速構(gòu)建項(xiàng)目以及引入bootstrap、jq
本篇文章主要介紹了vue-cli快速構(gòu)建項(xiàng)目以及引入bootstrap、jq，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05