Question

所以我试图在父组件中使用组件的多个实例。我目前正在使用Vuetify.js选项卡控件来显示每个组件。对于每个子组件，我想从外部Rest API加载不同的动态数据。

我更喜欢这样做的方法是将一个道具传递给孩子，这样他们就可以找出要加载的数据。我为每种类型的孩子都有一个vuex商店，但是我想重新使用模板，因为数据除了值之外是相同的。

父/包装

<template>
<div>
  <v-tabs fixed-tabs>
    <v-tab>
      PackagesType1
    </v-tab>
    <v-tab>
      PackagesType2
    </v-tab>
    <v-tab-item>
      <packages packageType="packageType1"/>
    </v-tab-item>
    <v-tab-item>
      <packages packageType="packageType2"/>
    </v-tab-item>
  </v-tabs>
</div>
</template>
<script>
import Packages from './Packages'

export default {
  components: {
    Packages
  }
}
</script>

命名子组件

<template>
<v-container fluid>
<v-data-table v-if="packageType1"
    :headers="headers"
    :items="packageType1"
  >
    <div>
        //ITEM TEMPLATE
    </div
  </v-data-table>
  <v-data-table v-else-if="packagesType2"
    :items="packagesType2"
  >
    <div>
        //ITEM TEMPLATE
    </div
  </v-data-table>
</v-container>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      name: 'packages'
    }
  },
  props: ['packageType'],
  computed: {
    ...mapGetters('packageModule1', ['packageType1']),
    ...mapGetters('packageModule2', ['packagesType2'])
  },
  methods: {
    getPackageByType () {
      if (this.packageType === 'packageType1') {
        this.getPackageType1()
        return
      }
      this.getPackageType2()
    },
    getPackageType1 () {
      this.$store.dispatch('chocoPackagesModule/getPackageType1')
        .then(_ => {
          this.isLoading = false
        })
    },
    getPackageType2 () {
      this.$store.dispatch('packagesType2Module/getPackageType2')
        .then(_ => {
          this.isLoading = false
        })
    }
  },
  created () {
    this.getPackageByType()
  }
}
</script>

现在它在加载时只渲染packageType1。

如何在不重复所有内容的情况下轻松区分这些类型？
我应该努力区分这些类型吗？用这种方式制作单独的子组件和角色？我是新手，但我会尽可能多地重复使用。

具有不同状态的多个命名组件

0 个答案: