Question

我正在做一个看起来像伪操作系统GUI的项目，其中显然涉及设置可以拖动并在其中包含不同内容的窗口。目前，我的设置仅涉及在App.vue的数据中保留一个名为“ windows”的数组来存储相关信息。我希望存储对插入窗口内的组件的引用或实际值，因此我可以遍历所有窗口，并使用v-for将它们全部用正确的容器呈现。

----------------- App.vue -------------

<template>
<div id="app">
  <div id="os">
    <window :info="window" :key="'window_'+index" v-for="(window, index) in windows">
    <!-- ^ Iterate through all stored windows ^ -->
        <slot-component></slot-component>
        <!-- ^ Ideally this would be a variable from data ^ -->
     </window>
 </div>
</div>
</template>

<script>
import Window from './components/Window/Window'
import SlotComponent from './components/Webpages/SlotComponent'
import SlotComponent2 from './components/Webpages/SlotComponent2'
import SlotComponent3 from './components/Webpages/SlotComponent3'

export default {
  name: 'App',
  data() {
    return {
      windows:[
        {
          title:"Window Title",
          active: true,
          innerComponent: slot-component
          // ^ Name or reference of component ^
        }
      ]
    }
  },
  components:{
    window: Window,
    slot-component: SlotComponent,
    slot-component2: SlotComponent2,
    slot-component3: SlotComponent3
  }
}
</script>

--------------- Window.vue -------------

<template>
<div class="window" :class="info.active ? 'active' : 'inactive'">
    <div class="content">
        <slot></slot>
        <!-- ^ The component passed from data ^ -->
    </div>
    <div class="taskbar"></div>
</div>
</template>

如果有更好的方法动态跟踪子组件，对于这样的GUI，我也很乐意听到。谢谢！

在数据中存储对vue组件的引用

0 个答案: