快捷導(dǎo)航

vue2創(chuàng)建高復(fù)用組件的方法示例

更新時間：2024年07月12日 08:57:19 作者：牧林陽

Vue2中的高復(fù)用組件通常是指那些設(shè)計(jì)得足夠通用,并能多次在項(xiàng)目中重復(fù)使用的組件,本文給大家詳細(xì)介紹了vue2創(chuàng)建高復(fù)用組件的方法示例,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下

1.使用 v-bind="$attrs"，主要用于在組件樹中自動傳遞屬性，當(dāng)一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定。相當(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"，

自動傳遞事件監(jiān)聽器：v-on="$listeners"會收集父作用域中的(不含.native修飾器的)v-on事件監(jiān)聽器，并把它們添加到當(dāng)前組件的實(shí)例上。
簡化組件間通信：通過自動傳遞事件監(jiān)聽器，簡化了父組件與子組件之間的通信方式，使得開發(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)來定義：

prop名：這個prop用于接收父組件通過v-model綁定的值。
event名：當(dāng)子組件需要更新這個值時，它會觸發(fā)一個事件，該事件的名稱由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', // 父組件通過v-model綁定的prop名
    event: 'update:modelValue' // 子組件觸發(fā)以更新v-model的事件名
  }
}
</script>

//子組件
<MyCustomInput v-model="inputValue" />

這里，v-model="inputValue"會被Vue解析為:modelValue="inputValue" @update:modelValue="inputValue = $event"。
v-model的默認(rèn)prop和event分別是modelValue和update:modelValue。但你可以通過組件的model選項(xiàng)來自定義它們

到此這篇關(guān)于vue2創(chuàng)建高復(fù)用組件的方法示例的文章就介紹到這了,更多相關(guān)vue2創(chuàng)建高復(fù)用組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue管理系統(tǒng)項(xiàng)目中的一些核心技能匯總
Vue是當(dāng)今增長最快的前端框架,Vue 平易近人、用途廣泛且性能卓越,它的語法非常直觀,并且具有友好的學(xué)習(xí)曲線,是開發(fā)人員最想學(xué)習(xí)的頂級前端庫之一,下面這篇文章主要給大家介紹了關(guān)于vue管理系統(tǒng)項(xiàng)目中的一些核心技能,需要的朋友可以參考下
2022-05-05
Vue3與pywebview實(shí)現(xiàn)獲取本地文件夾的絕對路徑
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合pywebview實(shí)現(xiàn)獲取本地文件夾的絕對路徑,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下
2024-11-11
Vue 組件注冊全解析
這篇文章主要介紹了Vue 組件注冊全解析的相關(guān)資料，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-12-12
Vue項(xiàng)目history模式下微信分享爬坑總結(jié)
這篇文章主要介紹了Vue項(xiàng)目history模式下微信分享爬坑總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
vue如何基于el-table實(shí)現(xiàn)多頁多選及翻頁回顯過程
在最近的一個項(xiàng)目中我需要實(shí)現(xiàn)表格的翻頁,并且還要實(shí)現(xiàn)全選、多選功能,下面這篇文章主要給大家介紹了關(guān)于vue如何基于el-table實(shí)現(xiàn)多頁多選及翻頁回顯過程的相關(guān)資料,需要的朋友可以參考下
2022-12-12
vue實(shí)現(xiàn)文字檢索時候?qū)⑺阉鲀?nèi)容標(biāo)紅功能
這篇文章主要介紹了vue中實(shí)現(xiàn)文字檢索時候?qū)⑺阉鲀?nèi)容標(biāo)紅,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-08-08
vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖
這篇文章主要介紹了vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
淺談使用Vue完成移動端apk項(xiàng)目
這幾天，我做了一個vue移動端的小項(xiàng)目，本文主要介紹了Vue移動端apk項(xiàng)目，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
vue的v-if里實(shí)現(xiàn)調(diào)用函數(shù)
這篇文章主要介紹了vue的v-if里實(shí)現(xiàn)調(diào)用函數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue中如何給多個按鈕動態(tài)添加類名
這篇文章主要介紹了vue中如何給多個按鈕動態(tài)添加類名問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11