Question

我不确定实现此目的的最佳方法是什么，但是我有一个store，其中包含一个Panel数组，该数组保存有关该特定面板的信息（当前只有一个标题和一个ID）：

@Module({
  namespaced: true
})
export default class extends VuexModule {
  private _panels: Panel[] = [
    new ColorsPanel,
    new LayersPanel
  ]
}

然后，我有了一个通过将title放入Panel中来显示标签的组件。当我单击选项卡时，我想在主显示屏的选项卡之间切换。

<template>
  <div>
    <div class="tabs">
      <panel-tab v-for="panel in panels" :key="panel.title" :panel="panel" @selected="onSelected"></panel-tab>
    </div>
    <!-- This is a panel component -->
    <component :is="panel"></component>
  </div>
</template>
<script>
  export default class DockablePanel extends Vue {
    public panel: string = 'LayersPanel'
  }
</script>

我当时正在考虑向Panel类添加另一个属性，即:is="panel"的值，但这似乎并不是一种很好的方法。

我该如何将我的Panel类与Vue组件相关联，以便当我更改选项卡栏中的选项卡时，组件也会随之变化？

Vue：如何将类与组件关联？

0 个答案: