設(shè)計(jì)組件可以做得很好，是通用的，並使用道具和事件進(jìn)行交流； 2。使用道具進(jìn)行輸入和發(fā)射事件，以進(jìn)行輸出，定義類型並使用EMITS清晰； 3.使用插槽（尤其是命名和默認(rèn)插槽）啟用靈活的內(nèi)容插入； 4。應(yīng)用範(fàn)圍的樣式和CSS變量，以防止衝突並允許主題自定義； 5。在UI/等專用文件夾中組織可重複使用的組件，並通過索引文件導(dǎo)出它們以容易導(dǎo)入；此外，文檔組件，驗(yàn)證道具，避免文本和編寫測(cè)試以確?？煽啃院涂删S護(hù)性 - 這種方法可確保真正可重複使用的VUE組件。

在VUE中創(chuàng)建可重複使用的組件是框架的核心優(yōu)勢(shì)之一。精心設(shè)計(jì)的組件可在應(yīng)用程序的不同部分甚至其他項(xiàng)目中使用，節(jié)省時(shí)間並保持代碼庫清潔。這是如何有效地構(gòu)建可重複使用的VUE組件的方法。

1。從一開始就設(shè)計(jì)可重複使用

在編寫任何代碼之前，請(qǐng)考慮使組件可重複使用的原因：

• 它應(yīng)該做得很好（遵循單一責(zé)任原則）。
• 它應(yīng)該是通用的，而不是與特定頁面或上下文相關(guān)的。
• 它應(yīng)該通過道具和發(fā)射事件接受輸入，而不是直接操縱外部狀態(tài)。

例如，與其創(chuàng)建僅適用於用戶的“ UserDeleteButton”，不如創(chuàng)建一個(gè)通用的確認(rèn)書，該通用確認(rèn)書要求在觸發(fā)操作之前要求確認(rèn)。

 <！ - 確認(rèn)button.vue->
<模板>
  <button @click =“ onclick”>
    {{ 標(biāo)籤 }}
  </button>
</template>

<script>
導(dǎo)出默認(rèn){
  道具：{
    標(biāo)籤： {
      類型：字符串，
      必需：是的
    }，，
    確認(rèn)：{
      類型：字符串，
      默認(rèn)值：“您確定嗎？”
    }
  }，，
  方法： {
    onclick（）{
      if（window.confirm（this.confirmmessage））{
        這個(gè)。 $ emit（“確認(rèn)”）；
      }
    }
  }
};
</script>

現(xiàn)在您可以在任何地方重複使用：

 <確認(rèn)書
  標(biāo)籤=“刪除用戶”
  確認(rèn)=“刪除此用戶？這不能被撤消?！?  @確認(rèn)=“ whandletele”
/>

2。正確使用道具和事件

道具讓父母?jìng)鬟f數(shù)據(jù)；活動(dòng)讓孩子們溝通。這種單向流使組件可預(yù)測(cè)和可重複使用。

最佳實(shí)踐：

• 定義清晰的道具類型和默認(rèn)值。
• 使用emits選項(xiàng)聲明自定義事件（VUE 3）或驗(yàn)證它們（帶有vue-emits插件或手動(dòng)）。
• 避免直接突變道具 - 而是發(fā)出事件。

示例：可重複使用的輸入組件

<！ -  textinput.vue->
<模板>
  <div>
    <label v-if =“ label”> {{label}} </label>
    <輸入
      ：value =“ modelValue”
      @input =“ $ emit（&#39;update：modelValue&#39;，$ event.target.value）”
      ：type =“ type”
      ：佔(zhàn)位符=“佔(zhàn)位符”
    />
  </div>
</template>

<script>
導(dǎo)出默認(rèn){
  道具：[&#39;ModelValue&#39;，&#39;label&#39;，&#39;type&#39;，“佔(zhàn)位符”]，
  emits：[&#39;update：modelValue&#39;]
};
</script>

與v-model一起使用：

 <textInput v-model =“用戶名” label =“用戶名”佔(zhàn)位符=“ inter用戶名” />

注意：在VUE 3中， modelValue update:modelValue是v-model的默認(rèn)值。如果需要，您可以使用參數(shù)語法自定義它。

3。利用靈活性的利用插槽

插槽使您可以將模板片段傳遞成組件，從而使它們比單獨(dú)的道具更靈活。

用例：

• 包裝器組件（卡，模態(tài)，佈局）
• 具有動(dòng)態(tài)內(nèi)容的組件

示例：可重複使用的卡組件

<！ -  card.vue->
<模板>
  <div class =“ card”>
    <div class =“ card-header”>
      <插槽名稱=“ header”>
        <h3> {{{title}} </h3>
      </slot>
    </div>
    <div class =“ card-body”>
      <插槽 />
    </div>
    <div class =“ card-footer”>
      <插槽名稱=“頁腳” />
    </div>
  </div>
</template>

<script>
導(dǎo)出默認(rèn){
  道具：[&#39;title&#39;]
};
</script>

用法：

 <card title =“ profile”>
  <p>用戶配置文件信息轉(zhuǎn)到此處。 </p>
  <模板#footer>
    <按鈕>保存</button>
  </template>
</card>

這樣，同一Card可以在許多情況下使用不同的內(nèi)容。

4。保持樣式範(fàn)圍範(fàn)圍且對(duì)主題友好

避免樣式衝突並確?？芍匮}使用：

• 使用帶有唯一名稱的scoped樣式或CSS類。
• 將CSS變量用於主題，因此可以在不重寫的情況下自定義樣式。

 <樣式範(fàn)圍>
?？ㄆ?{
  邊界：1PX固體var（ - 邊框色，#ddd）;
  邊界拉迪烏斯：8px;
  填充：16px;
  背景：var（-card-bg，#fff）;
}
</style>

現(xiàn)在，消費(fèi)者可以覆蓋外觀：

 <card style =“  -  card-bg：＃f0f8ff;  -   -  border-color：＃9ec5ff” />

5。正確組織和導(dǎo)出組件

將可重複使用的組件放在專用文件夾中，例如components/UI/或components/Shared/ 。

示例結(jié)構(gòu)：

 src/
└─..pontents/
    UI/
        鈕扣
        輸入
        模式
        卡

您可以創(chuàng)建一個(gè)索引文件以導(dǎo)出它們：

 // @/components/ui/index.js
來自'./button.vue'的導(dǎo)出{默認(rèn)為uibutton};
來自'./input.vue'的導(dǎo)出{默認(rèn)為uiinput};
來自'./card.vue'的導(dǎo)出{默認(rèn)為uicard};

然後在任何地方導(dǎo)入：

從'@/components/ui'導(dǎo)入{uibutton，uicard};

在較大的應(yīng)用程序中，請(qǐng)考慮將通用組件作為單獨(dú)的軟件包（例如，使用Vite Vue組件庫設(shè)置）作為單獨(dú)的軟件包。

獎(jiǎng)勵(lì)提示

• 記錄您的組件：使用評(píng)論或工具（例如Storybook）顯示用法示例。
• 積極驗(yàn)證道具：有助於儘早發(fā)現(xiàn)錯(cuò)誤並使使用情況更清晰。
• 避免硬編碼文本：使用Props或I18N支持標(biāo)籤。
• 測(cè)試它們：特別是如果廣泛使用，請(qǐng)為邊緣案例編寫單元測(cè)試。

可重複使用的VUE組件不僅涉及代碼，而且還涉及設(shè)計(jì)靈活的，可預(yù)測(cè)的接口。專注於清晰的API（道具/事件/插槽），避免副作用，並考慮其他（或未來）如何使用該組件。

基本上是：道具，事件，內(nèi)容插槽以及不衝突的樣式。那是食譜。

以上是如何在VUE中創(chuàng)建可重複使用的組件的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！