Vue多用途組件？

我有a small app that lets you add, remove and edit recipes to a list of recipes。Vue多用途組件？

添加路線/add並且編輯路線爲/edit。我正在使用AddRecipe組件這兩個路由。

如果路由包含'edit'，組件的行爲將略有不同，即輸入字段預填充了您正在編輯的值。

這裏是AddRecipeForm.vue，共享組件：

<template> 
    <div> 
     <form class="form"> 
      <input v-model="recipe.name" placeholder="Recipe Name"> 
      <textarea v-model="recipe.description" placeholder="Recipe Description..." rows="10"></textarea> 
      <button :disabled="nothingEntered()" @click.prevent="addRecipe">Submit</button> 
     </form> 
    </div> 
</template> 

<script> 
export default { 
    name: 'AddRecipeForm', 
    data() { 
     return { 
      recipe: this.isEdit() 
      ? this.$store.state.recipes[this.$route.params.id] 
      : { 
       name: '', 
       description: '' 
      } 
     } 
    }, 
    methods: { 
     isEdit() { 
      return this.$route.path.includes('edit') 
     }, 
     addRecipe() { 
      if (this.isEdit()) { 
       this.$store.dispatch('addRecipe', this.recipe) 
      } else { 
       this.$store.dispatch('addRecipe', { 
        id: Date.now(), 
        ...this.recipe 
       }) 
      } 
      this.$router.push('/') 
     }, 
     nothingEntered() { 
      return !this.recipe.name || !this.recipe.description 
     } 
    }, 
} 
</script>

我想有這個問題更好的解決方案。例如，如果項目後期還需要更多視圖，那麼還需要組件？如果我想要一個乾淨可讀的可重用組件，我無法繼續檢查組件中的路由。

對於需要相同視圖的路由，你最喜歡的處理方式是什麼？

來源

2016-12-26 alanbuchanan

如果你從single responsibility看這個狀態，如果你有兩個理由要改變一個類（在你的情況下），你必須將這個功能分成兩個類。比它看起來像一個重載組件。但是，考慮到當前所涉及的邏輯單純性，直到您可以將邏輯封裝在像isEdit之類的函數內，似乎是一個很好的解決方案，但是如果有更多不同類型的檢查進入畫面，則可以創建兩個或多個單獨的組件像/EditRecipeForm等每個做單一的事情。

來源

2016-12-26 17:14:15 Saurabh

獲取太多if s時的一種常見技術是使用配置圖（我做了這個短語），例如，

data() { 
    return { 
     configMap: { 
      add: { 
       addRecipe: function() {}, 
       inputDisabled: false 
      }, 
      edit: { 
       addRecipe: function() {}, 
       inputDisabled: false 
      }, 
      view: { 
       addRecipe: function() {}, 
       inputDisabled: true 
      } 
     } 
    } 
}

在這裏，我們映射條件，這是路由路徑段，到選項，我們可以在這個組件直接使用，這樣我們就可以在模板:disabled=configMap[routeType].inputDisabled寫。

而且在VUE，我們可以把在computedinputDisabled，addRecipe在methods更清楚地聲明它們，就像你沒有以上。

而如果add類型，edit超越的路線，我們可以定義類型作爲prop，並傳遞它（作爲配置選項，就像我們對待任何其他可重用的組件）

來源

2016-12-28 15:55:20

Vue多用途組件？

回答

相關問題