設(shè)計具有清晰道具和事件的組件，以確?？深A(yù)測性和可重復(fù)性。 2。使用默認(rèn)值，命名和范圍插槽來啟用跨上下文的靈活內(nèi)容組成和適應(yīng)性。 3.通過組合分享邏輯，例如useformvalidation，而不是依靠繼承來更好地脫鉤和可檢測性。 4.通過使用CSS變量，支持通過$ attrs合并的類以及允許父母定義的類，以保持靈活性的靈活性，確?？梢暂p松自定義和重復(fù)使用跨項目的組件。

構(gòu)建可重復(fù)使用的可重復(fù)使用的VUE組件不僅僅是編寫干凈的代碼，而是關(guān)于設(shè)計靈活，可維護(hù)且易于重復(fù)使用的組件。關(guān)鍵在于從合同（道具，事件，老虎機(jī)）而不是特定用例來思考。這是正確做的方法。

1。圍繞道具和事件的設(shè)計（組件合同）

每個組件都應(yīng)具有清晰，可預(yù)測的接口。這意味著：

• 使用道具進(jìn)行輸入- 任何改變組件表現(xiàn)或外觀的事物都應(yīng)該是道具。
• 發(fā)射事件以進(jìn)行輸出- 當(dāng)組件需要向上傳達(dá)某些東西（例如單擊按鈕或表單更改）時，請使用emit 。

 <！ - 可重復(fù)使用的按鈕 - >
<模板>
  <按鈕
    ：class =“``btn btn-$ {variant}`
    @Click =“ $ emit（&#39;click&#39;）”
  >
    <插槽 />
  </button>
</template>

<腳本設(shè)置>
DefineProps（{
  變體：{
    類型：字符串，
    默認(rèn)值：“ primary”，
    驗證器：（v）=> [&#39;primary&#39;，&#39;secondary&#39;，&#39;danger&#39;]。包括（v）
  }
}））
定義（[&#39;click&#39;]）
</script>

此按鈕在任何地方都起作用 - login形式，模態(tài)頁腳，納維爾（Navbar），因為它不假定上下文。

？專家提示：使用defineProps和defineEmits進(jìn)行明確驗證。它可以使您的組件進(jìn)行自我記錄，并防止濫用。

2。利用插槽以最大程度的靈活性

插槽使您可以將內(nèi)容注入組件，從而真正可以組合。

使用：

• 主要內(nèi)容的默認(rèn)插槽
• 命名為結(jié)構(gòu)化布局的老虎機(jī)
• 當(dāng)父母需要訪問子數(shù)據(jù)時，示例插槽

<！ - 可重復(fù)使用的模態(tài) - >
<模板>
  <div class =“ modal”>
    <Header>
      <插槽名稱=“ header”>
        <h3> {{{title}} </h3>
      </slot>
    </header>

    <ain>
      <插槽 />
    </main>

    <頁腳>
      <插槽名稱=“頁腳”>
        <button @click =“ $ emit（&#39;close&#39;）”>關(guān)閉</button>
      </slot>
    </footer>
  </div>
</template>

<腳本設(shè)置>
DefineProps（[&#39;title&#39;]）
定義（[&#39;close&#39;]）
</script>

現(xiàn)在，您可以自定義標(biāo)題或頁腳，而無需分配組件。

？現(xiàn)實世界中的好處：諸如元素加上或原始價值之類的設(shè)計系統(tǒng)大量使用此模式。單個<Modal>可以支持表單，警報或向?qū)А?/p>

3.偏愛構(gòu)圖比繼承

VUE不能很好地支持組件繼承。而是使用Composable （通過useX函數(shù)）共享邏輯。

示例：表單驗證

// composables/useformvalidation.js
導(dǎo)出函數(shù)useformvalidation（初始值，規(guī)則）{
  const values = ref（{... initialValues}））
  const errors = ref（{}）

  const varation =（）=> {
    讓有效= true
    for（const [鍵，規(guī)則]的object..entries（rules））{
      if（rule.equired &&！values.value [key]）{
        errors.value [key] ='需要此字段'
        有效= false
      }
    }
    返回有效
  }

  const reset =（）=> {
    values.value = {... initialValues}
    errors.value = {}
  }

  返回{值，錯誤，驗證，重置}
}

現(xiàn)在以任何形式使用它：

 <腳本設(shè)置>
從&#39;@/composables/useformvalidation&#39;導(dǎo)入{useformvalidation}

const規(guī)則= {電子郵件：{必需：true}，密碼：{必需：true}}
const {values，errors，validate} = useformvalidation（
  {電子郵件：&#39;&#39;，密碼：&#39;&#39;}，
  規(guī)則
）
</script>

<模板>
  <輸入v-model =“ values.email” type =“ email” />
  <span v-if =“ errors.email”> {{errors.email}}} </span>
</template>

這樣可以使邏輯分解和測試。

4。保持造型靈活

避免限制重復(fù)使用的硬編碼樣式。反而：

• 將CSS變量用于主題
• 通過$attrs支持類道具合并
• 允許父母的自定義課程

<模板>
  <div
    class =“卡”
    ：class =“ $ attr.class”
  >
    <插槽 />
  </div>
</template>

<樣式>
?？ㄆ?{
   - 卡牌：1REM；
  填充：var（ - 卡片）;
  邊界拉迪烏斯：8px;
  背景：#fff;
  盒子陰影：0 2PX 8PX RGBA（0,0,0,0.1）;
}
</style>

父母可以做：

 <card class =“ w-full max-w-md mx-auto” />

而且有效。

可重復(fù)使用的組件沒有在一天內(nèi)建造。開始?。耗靡粋€經(jīng)常復(fù)制的組件，剝離硬編碼邏輯，添加道具和插槽，然后將共享行為提取到組合中。隨著時間的流逝，您將構(gòu)建一個像樂高積木的庫庫，毫不費力地將其搭配在一起。

基本上，如果您發(fā)現(xiàn)自己復(fù)制了一個小更改的組件，則可以更重復(fù)使用它。修復(fù)一次，到處使用。

以上是構(gòu)建可重復(fù)使用的可復(fù)合vue組件的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！