Vue2 中的表示组件

Question

我想在浮动边栏中显示我的所有表单和信息页面。 我不想将浮动侧边框 html 复制并粘贴到所有地方。所以我想创建一个组件来充当我的表单或信息页面的容器。 这是表单的示例代码。

<div class="floating-sidebox">
  <div class="sidebox-header">
    <div class="sidebox-center">
      <h3 class="title">{{ title }}</h3>
    </div>
  </div>
  <div class="sidebox-content">
    <div class="sidebox-center">
      <!-- This is the actual content. Above container code is common for all forms. -->
      <vue-form-generator :schema="schema" :model="model" :options="{}"></vue-form-generator>
    </div>
  </div>
  <div class="floating-sidebox-close" @click="cancel"></div>
</div>
<div class="floating-sidebox-overlay"></div>

在上面的代码中，我使用vue-form-generator 来生成表单。 floating-sidebox 元素对于所有表单和信息页面都是通用的。我想通过 Presentational 组件对其进行抽象。

我该怎么做Vue2？

Answer 1

定义一个包含所有“浮动边箱”组件的组件。您可以通过 this.$children 访问“浮动边箱”，并将其标题等用作导航占位符。由于 $children 是一个数组，因此您可以轻松地用和索引表示当前可见的实体

...
data: function() {
   sideboxes: [],
   currentIndex: null
},
...
mounted: function() {
   this.sideboxes = this.$children;
   this.currentIndex= this.$children.length > 0 ? 0 : null;
},
...
computed: {
    current: function() {
       return this.currentIndex ? this.sideboxes[this.currentIndex] : null;
    }
}

然后你可以在包装视图的模板中绑定

<ul>
    <li v-for="(sidebox, index) in sideboxes" @click="currentIndex = index"><!-- bind to prop like title here --></li>
</ul>

<div>
   <!-- binding against current -->
</div>

JSfiddle 与组件 https://jsfiddle.net/ptk5ostr/3/