在 vue.js 中创建一个可重用的组件 父母孩子：

如何解决在 vue.js 中创建一个可重用的组件 父母孩子：

如何让我的 vue.js 组件更加通用和可重用，并且只能传递必要的数据？

这就是我想要构建的：

结构：

• 组件有一个标题
• 组件有不同的输入
• 组件有一个提交按钮
• 组件有一个列表作为页脚 - 根据输入传递

我的方法

父母

// App.vue
<template>
  <div>
    <!-- Component A -->
    <SettingsCard
     :listA="listA"
     cardType="CompA"
    >
     <template v-slot:header>
       Foo - Component A
     </template>
    </SettingsCard>

    <!-- Component B -->
    <SettingsCard
     :listB="listB"
     cardType="CompB"
    >
     <template v-slot:header>
       Bar - Component B
     </template>
    </SettingsCard>
  </div>
</template>

孩子：

// SettingsCard.vue
<template>
  <div>
    <slot name="header"></slot>

    <div v-if="cardType === 'CompA'">
     <!-- Show input and submit button for component a -->
    </div>

    <div v-if="cardType === 'CompB'">
     <!-- Show input and submit button for component b -->
    </div>

    <ListComponent
     :cardType="cardType"
     :list="computedList"
    />
  </div>
</template>

<script>
export default {
  props: {
    cardType: String,// for the v-if conditions
    listA: Array,ListB: Array
  },data() {
   return {
      namefromCompA: '',// input from component A
      namefromCompB: ''  // input from component B
    }
  },computed: {
    computedList() {
      // returns an array and pass as prop the the card footer
    }
  }
}
</script>

问题

1. 我的 SettingsCard.vue 组件中有 undefined 道具和 unused 数据

// CompA:
props: {
 cardType: 'compA',listA: [1,2,3],// comes from the parent
 listB: undefined // how to prevent the undefined?
}

// CompA:
data() {
  return {
    namefromCompA: 'hello world',namefromCompB: '' // unused - please remove me
  }
}

2. 使用v-if="cardType === 'compA'"感觉不对

您是否有更好的方法来使该组件可重用并删除任何不必要的内容？

解决方法

使用方法代替 "cardType === 'CompA'"。

只需在您的 SettingsCard.vue

中试试这个

methods: {
    showMeWhen(type) {
      return this.cardType === type;
    },},}

并且您的 v-if 渲染条件如下： v-if="showMeWhen('compA')"

---

更新

例如在您的 namefromCompA/B 中，您只需传递一个新道具即可显示正确的名称。

props: {
    cardType: String,// for the v-if conditions
    listA: Array,ListB: Array,namefromComponent: {
        type: String,default: 'NoName'
    }
  },

然后在您的用法中，您只需像处理其他道具一样传递它。

<SettingsCard
     :listB="listB"
     cardType="CompB"
     namefrom-component="my Name for component B"
    >