渲染多个 .vue 组件

【问题标题】：Rendering more than one .vue component渲染多个 .vue 组件
【发布时间】：2017-06-06 21:13:10
【问题描述】：

现在我的 Vue 正在渲染组件 dnaMoleculeFileInfo。如何添加另一个组件以使用其自己的道具进行渲染？

var app = new Vue({
    el: '#app',
    render: h => h(dnaMoleculeFileInfo, {
        props: {
            format: data.dnamoleculefile.format,
            id: data.dnamoleculefile.id,
            name: data.dnamoleculefile.name,
            sequence: data.sequence.bases,
            sequenceLength: data.length
        }
    })
})

【问题讨论】：

如果你想要两个组件，你必须渲染一个容器和两个组件作为子组件。

标签： vue.js vuejs2 vue-component

【解决方案1】：

类似的东西。

console.clear()

const dnaMoleculeFileInfo = {
  template:`<h2>I'm a dnaMoleculeFileInfo</h2>`
}

const someOtherComponent = {
  template:`<h2>I'm some other component</h2>`
}

var app = new Vue({
    el: '#app',
    render(h){
      // Add the props you want to these two components
      const dna = h(dnaMoleculeFileInfo)
      const other = h(someOtherComponent)
      // return a container with both of them as children
      return h("div", [dna, other])
    }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app"></div>

【讨论】：