vue2創(chuàng)建高復(fù)用組件的方法示例
更新時(shí)間：2024年07月12日 08:57:19 作者：牧林陽(yáng)
Vue2中的高復(fù)用組件通常是指那些設(shè)計(jì)得足夠通用,并能多次在項(xiàng)目中重復(fù)使用的組件,本文給大家詳細(xì)介紹了vue2創(chuàng)建高復(fù)用組件的方法示例,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下
1.使用 v-bind="$attrs"，主要用于在組件樹(shù)中自動(dòng)傳遞屬性，當(dāng)一個(gè)組件沒(méi)有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定。相當(dāng)于把父組件用到的屬性自動(dòng)獲取。
<el-button :type="getButtonType"
:icon="getIcon"
v-bind="$attrs"
size="small"
class="u-ptype-button">
<slot></slot>
</el-button>2.使用 v-on="$listeners"，
- 自動(dòng)傳遞事件監(jiān)聽(tīng)器：
v-on="$listeners"會(huì)收集父作用域中的(不含.native修飾器的)v-on事件監(jiān)聽(tīng)器，并把它們添加到當(dāng)前組件的實(shí)例上。 - 簡(jiǎn)化組件間通信：通過(guò)自動(dòng)傳遞事件監(jiān)聽(tīng)器，簡(jiǎn)化了父組件與子組件之間的通信方式，使得開(kāi)發(fā)者可以更專注于業(yè)務(wù)邏輯的實(shí)現(xiàn)。
<el-button :type="getType"
:icon="Icons"
size="small"
v-on="$listeners"
class="ptype">
<slot></slot>
</el-button>3.如果要在子組件標(biāo)簽上使用v-model屬性
你可以在組件內(nèi)部使用model選項(xiàng)來(lái)定義：
- prop名：這個(gè)prop用于接收父組件通過(guò)
v-model綁定的值。 - event名：當(dāng)子組件需要更新這個(gè)值時(shí)，它會(huì)觸發(fā)一個(gè)事件，該事件的名稱由
model選項(xiàng)中的event屬性指定。
<template>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
type="text"
/>
</template>
<script>
export default {
name: 'MyCustomInput',
props: {
modelValue: String // 接收的值，與v-model綁定的prop名一致
},
emits: ['update:modelValue'], // 明確聲明發(fā)出的事件
model: {
prop: 'modelValue', // 父組件通過(guò)v-model綁定的prop名
event: 'update:modelValue' // 子組件觸發(fā)以更新v-model的事件名
}
}
</script>//子組件 <MyCustomInput v-model="inputValue" />
- 這里，v-model="inputValue"會(huì)被Vue解析為:modelValue="inputValue" @update:modelValue="inputValue = $event"。
- v-model的默認(rèn)prop和event分別是modelValue和update:modelValue。但你可以通過(guò)組件的model選項(xiàng)來(lái)自定義它們
到此這篇關(guān)于vue2創(chuàng)建高復(fù)用組件的方法示例的文章就介紹到這了,更多相關(guān)vue2創(chuàng)建高復(fù)用組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Element-ui自定義table表頭、修改列標(biāo)題樣式、添加tooltip、:render-header使用
這篇文章主要介紹了Element-ui自定義table表頭、修改列標(biāo)題樣式、添加tooltip、:render-header使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
在Vue項(xiàng)目中,通過(guò).env文件配置環(huán)境變量,支持不同環(huán)境下加載不同配置,Vite通過(guò)import.meta.env向應(yīng)用暴露環(huán)境變量,支持基本URL、開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境識(shí)別等,.env文件可設(shè)置環(huán)境優(yōu)先級(jí),修改后需重啟生效,TypeScript可通過(guò)增加文件獲取智能提示2024-10-10
vue實(shí)現(xiàn)滾動(dòng)條下滑時(shí)隱藏導(dǎo)航欄,上滑時(shí)顯示導(dǎo)航欄功能
這篇文章主要介紹了vue實(shí)現(xiàn)滾動(dòng)條下滑時(shí)隱藏導(dǎo)航欄,上滑時(shí)顯示導(dǎo)航欄,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
下面小編就為大家分享一篇elementui的默認(rèn)樣式修改方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助，一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Mockjs是一個(gè)用于生成隨機(jī)數(shù)據(jù)和攔截Ajax請(qǐng)求的庫(kù),可以與Vue和Axios結(jié)合使用,提高前端開(kāi)發(fā)效率,通過(guò)在項(xiàng)目中引入Mock.js文件,可以模擬后端API,攔截Ajax請(qǐng)求并返回自定義響應(yīng),這種方法適用于在后端尚未開(kāi)發(fā)完成時(shí)的前端開(kāi)發(fā)測(cè)試2024-10-10
這篇文章主要介紹了Vuex 入門教程，Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式, 那這個(gè) vuex 怎么用呢？就具體來(lái)看一下吧2018-01-01
去年，vue3出來(lái)了。增加了很多新功能，但是也刪掉了一些功能。比如刪掉了vue2中的過(guò)濾器filter功能。與此同時(shí)，官方建議：用方法調(diào)用或計(jì)算屬性替換過(guò)濾器。本文將分析vue3刪除過(guò)濾器的原因及如何用其他方法實(shí)現(xiàn)過(guò)濾器的功能2021-05-05
淺談vue.js導(dǎo)入css庫(kù)(elementUi)的方法
下面小編就為大家分享一篇淺談vue.js導(dǎo)入css庫(kù)(elementUi)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue的彈出框?qū)崿F(xiàn)圖片預(yù)覽和視頻預(yù)覽功能
本文介紹基于Vue3的媒體預(yù)覽組件,支持圖片與視頻預(yù)覽,具備縮放、旋轉(zhuǎn)、拖拽功能,采用ElementUI Dialog容器,通過(guò)計(jì)算屬性實(shí)現(xiàn)動(dòng)態(tài)樣式,優(yōu)化拖拽性能,自動(dòng)調(diào)整方向,便于集成使用2025-08-08
Vue2?響應(yīng)式系統(tǒng)之?dāng)?shù)組
這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之?dāng)?shù)組，本文接著上幾篇文章Vue2響應(yīng)式系統(tǒng)?、Vue2?響應(yīng)式系統(tǒng)之分支切換，響應(yīng)式系統(tǒng)之嵌套、響應(yīng)式系統(tǒng)之深度響應(yīng)?展開(kāi)相關(guān)內(nèi)容,需要的朋友可以參考一下2022-04-04