在Vue中动态添加一种类型的组件

Question

我在"How to dynamically adding different components in Vue"上读到一篇文章。

有一个很好的方法可以将不同的组件绑定到标签上。

但是我想绑定一个类型/名称组件，根据属性的不同而有所不同，而且一个选项卡必须对应于具有相应属性的组件的一个实例。我可以在不同选项卡中重用我的组件吗？

类似于：

<template>
  <button
          v-for="tab in tabs"
          v-bind:key="tab.name"
          v-bind:class="['tab-button', { active: currentTab === tab }]"
          v-on:click="currentTab = tab"
  >
        {{ tab.name }}
  </button>
  <component v-bind:is="currentTab.component" :id_1=currentTab.id_1 :id_2=currentTab.id_2></component>
</template>

<script>
import tab-component from "..."
var tabs = [
  {
    name: "WS1",
    component: "tab-component",
    uwb_id: "PL_DL_test",
    ws_id: "id_Ws_1"
  },
  {
    name: "WS2",
    component: "tab-component",
    uwb_id: "PL_DL_test",
    ws_id: "id_Ws_2"
  }
]

export default {
  components: {
    tab-component
  },
  data() {
    return {
      tabs: tabs,
      currentTab: tabs[0],
    }
  }

}

<script>

有没有可能做这样的事情？

感谢您的回复！

Answer 1

为此，您可以使用computed属性。

<template>
  <button
    v-for="(tab, index) in tabs"
    :key="tab.name"
    :class="['tab-button', { active: currentTabIndex === index }]"
    @click="currentTabIndex = index"
  >
    {{ tab.name }}
  </button>
  <component :is="activeTab.component" :prop1="activeTab.prop1 :prop2="activeTab.prop2"></component>
</template>


export default {
  components: {
    tab-component
  },
  data() {
    return {
      tabs: [
        {
          name: "WS1",
          component: "tab-component",
          uwb_id: "PL_DL_test",
          ws_id: "id_Ws_1"
        },
        {
          name: "WS2",
          component: "tab-component",
          uwb_id: "PL_DL_test",
          ws_id: "id_Ws_2"
        }
      ],
      currentTabIndex: 1
    }
  },
  computed: {
    activeTab () {
      return this.tabs[this.currentTabIndex]
    }
  }

}