渲染多个.vue组件

时间:2017-06-06 21:13:10

标签: vue.js vuejs2 vue-component

现在我的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
        }
    })
})

1 个答案:

答案 0 :(得分: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])
    }
})
&#13;
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app"></div>
&#13;
&#13;
&#13;