Vuejs - 具有不同数据的相同组件

Question

我正在尝试重复使用相同的组件，但使用不同的数据加载组件。我认为只需提供唯一的 ID 就可以解决问题，但没有运气。对于这些数据，我从 Vuex store 切换到使用 dataShare 这就是我正在做的事情：

组件：

<logoHeader :panel=0 title="Add your logo / header" id="top" topPadding="pt-10" />
<logoHeader :panel=1 title="Add your main image" id="main" topPadding="pt-0"/>

所以它是完全相同的组件，有一些不同的props 和不同的ids

这是logoHeader 组件：

<template>
  <v-row
    :class="topPadding"
    align="center"
    justify="center"
  >
    <v-col
      align="center"
      justify="center"
      cols="12"
    >
      <v-hover v-slot:default="{ hover }">
        <v-card 
          :elevation="hover ? 12 : 0"
          class="mx-auto"
          max-width="600"
        >
          <v-img
            v-if="showImage"
            :src="imageUrl"
            max-width="600px"
            class="pointer"
            @click="panel = 0"
          >
          </v-img>
          <v-icon
            v-if="!showImage" 
            class="my_dark_purple_text" 
            size="100"
            @click="sendToPanel"
          >add_box</v-icon>
            <p class="my_dark_purple_text">{{ title }}</p>
            <p>URL {{ imageUrl }}</p>
            <p>Show image? {{ showImage }}</p>
        </v-card>
      </v-hover>
    </v-col>
  </v-row>
</template>


<script>
import {mapGetters} from 'vuex';
import {mapActions} from 'vuex';
import {dataShare} from '../../../packs/fresh-credit.js';

export default {
  props: ['panel', 'title', 'topPadding'],
  data() {
    return {
      imageUrl: "",
      showImage: false,
    }
  },
  created() {
    dataShare.$on('imageUrl', (data) => {
      this.imageUrl = data;
    });
    dataShare.$on('showImage', (data) => {
      this.showImage = data;
    });
  },
  computed: {
    ...mapGetters('emailPanel', [
      'returnPanel'
    ]),
  },
  methods: {
    ...mapActions('emailPanel', [
      'updatePanel'
    ]),
    sendToPanel() {
      this.updatePanel(this.panel);
    },
  },
}
</script>

最后这是数据进入系统的地方：

<template>
  <v-expansion-panel-content>
    <h1 class="subtitle-1 font-weight-bold">Only images files accepted</h1>
    <v-file-input
      v-model="image" 
      accept="image/*" 
      label="Image Upload"
      prepend-icon="add_a_photo"
      color='#68007d'
    ></v-file-input>
    <v-btn
      :disabled="disableUpload" 
      color="#68007d"
      class="white--text"
      @click="sendImage"
    >Submit</v-btn>
  </v-expansion-panel-content>
</template>

<script>
import axios from 'axios';
import {dataShare} from '../../../../packs/fresh-credit.js';

export default {
  data() {
    return {
      image: null,
      disableUpload: true,
    }
  },
  watch: {
    image: function() {
      if(this.image.size > 0){
        this.disableUpload = false;
      }
      else{
        this.disableUpload = true;
      }
    }
  },
  computed: {
  },
  methods: {
    sendImage() {
      let formData = new FormData();
      formData.append('file', this.image);
      axios.post('/admin/features/images', formData,
        { 
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
      ).then(response => {
        dataShare.$emit('imageUrl', response.data);
        dataShare.$emit('showImage', true);
      }); 
    }
  },
}
</script>

我误入歧途了？

Answer 1

将key 属性添加到组件并将其设置为不同的值（例如1 和2）。如果key 有不同的值，Vue 会在渲染时区分它们。 Here是基本解释。