渲染多个.vue组件

问题描述:

现在我的Vue渲染组件dnaMoleculeFileInfo。我如何添加另一个组件以使用自己的道具进行渲染?渲染多个.vue组件

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 
     } 
    }) 
}) 
+0

如果你想两个组件,你将不得不使容器和两个组件的孩子。 – Bert

就像这样。

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/[email protected]/dist/vue.js"></script> 
 
<div id="app"></div>