2017-06-06 206 views
0

現在我的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

回答

4

就像這樣。

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>