Хранение ссылки на vue Component в данных - PullRequest
Новая
       16

Хранение ссылки на vue Component в данных

0 голосов
/ 18 июня 2019

Я работаю над проектом, который выглядит как графический интерфейс псевдо-операционной системы, который, очевидно, включает в себя настройку окон, которые можно перетаскивать и переставлять с различным содержимым внутри них. В настоящее время моя установка включает в себя хранение массива данных 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>

Если есть лучший метод для динамического отслеживания дочерних компонентов, для такого графического интерфейса, я бы тоже хотел это услышать. Спасибо!

...