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

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

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

1.使用 v-bind="$attrs"，主要用于在組件樹中自動傳遞屬性，當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定。相當于把父組件用到的屬性自動獲取。

 <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)聽器，并把它們添加到當前組件的實例上。
簡化組件間通信：通過自動傳遞事件監(jiān)聽器，簡化了父組件與子組件之間的通信方式，使得開發(fā)者可以更專注于業(yè)務邏輯的實現(xiàn)。

  <el-button :type="getType" 
    :icon="Icons"
    size="small"
    v-on="$listeners"
    class="ptype">
    <slot></slot>
  </el-button>

3.如果要在子組件標簽上使用v-model屬性

你可以在組件內部使用model選項來定義：

prop名：這個prop用于接收父組件通過v-model綁定的值。
event名：當子組件需要更新這個值時，它會觸發(fā)一個事件，該事件的名稱由model選項中的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的默認prop和event分別是modelValue和update:modelValue。但你可以通過組件的model選項來自定義它們

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

您可能感興趣的文章:

Element-ui自定義table表頭、修改列標題樣式、添加tooltip、:render-header使用
這篇文章主要介紹了Element-ui自定義table表頭、修改列標題樣式、添加tooltip、:render-header使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
vue項目中的.env文件加載方式
在Vue項目中,通過.env文件配置環(huán)境變量,支持不同環(huán)境下加載不同配置,Vite通過import.meta.env向應用暴露環(huán)境變量,支持基本URL、開發(fā)環(huán)境和生產(chǎn)環(huán)境識別等,.env文件可設置環(huán)境優(yōu)先級,修改后需重啟生效,TypeScript可通過增加文件獲取智能提示
2024-10-10
vue實現(xiàn)滾動條下滑時隱藏導航欄,上滑時顯示導航欄功能
這篇文章主要介紹了vue實現(xiàn)滾動條下滑時隱藏導航欄,上滑時顯示導航欄,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-07-07
elementui的默認樣式修改方法
下面小編就為大家分享一篇elementui的默認樣式修改方法，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧
2018-02-02
使用mockjs如何生成隨機數(shù)據(jù)
Mockjs是一個用于生成隨機數(shù)據(jù)和攔截Ajax請求的庫,可以與Vue和Axios結合使用,提高前端開發(fā)效率,通過在項目中引入Mock.js文件,可以模擬后端API,攔截Ajax請求并返回自定義響應,這種方法適用于在后端尚未開發(fā)完成時的前端開發(fā)測試
2024-10-10
Vuex 入門教程
這篇文章主要介紹了Vuex 入門教程，Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式, 那這個 vuex 怎么用呢？就具體來看一下吧
2018-01-01
vue3刪除過濾器的原因
去年，vue3出來了。增加了很多新功能，但是也刪掉了一些功能。比如刪掉了vue2中的過濾器filter功能。與此同時，官方建議：用方法調用或計算屬性替換過濾器。本文將分析vue3刪除過濾器的原因及如何用其他方法實現(xiàn)過濾器的功能
2021-05-05
淺談vue.js導入css庫(elementUi)的方法
下面小編就為大家分享一篇淺談vue.js導入css庫(elementUi)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue的彈出框實現(xiàn)圖片預覽和視頻預覽功能
本文介紹基于Vue3的媒體預覽組件,支持圖片與視頻預覽,具備縮放、旋轉、拖拽功能,采用ElementUI Dialog容器,通過計算屬性實現(xiàn)動態(tài)樣式,優(yōu)化拖拽性能,自動調整方向,便于集成使用
2025-08-08
Vue2?響應式系統(tǒng)之數(shù)組
這篇文章主要介紹了Vue2?響應式系統(tǒng)之數(shù)組，本文接著上幾篇文章Vue2響應式系統(tǒng)?、Vue2?響應式系統(tǒng)之分支切換，響應式系統(tǒng)之嵌套、響應式系統(tǒng)之深度響應?展開相關內容,需要的朋友可以參考一下
2022-04-04