Vueで複数のルート要素をとる

Question

<template>
  <div>
    {{ my_dear_name}}　さんへ
  </div>

  <slot />

  <div>
    {{ my_name}} より
  </div>
</template>

<script>
export default {
  props :{
    my_dear_name,
    my_name
  }
}
</script>

こんな感じのノリでコンポーネントを生成したいのですが、vueのテンプレートは当たり前ですが、ルート要素は一つしか取れません。
それは理解したうえで、なんとか複数のルート要素をもったコンポーネントを生成したいと思っています。

Reactであれば、

import React from 'react'

export const = ({ my_dear_name, my_name, slot }) => {
  return <React.Fragment>
    <div>
      {{ my_dear_name}}　さんへ
    </div>

    { slot }

    <div>
      {{ my_name}} より
    </div>

  </React.Fragment>
}

のようにすれば複数のルート要素を持つことができるのですが、Vueではどのようにすれば可能となるのでしょうか。

Answer 1

おっしゃる通り、現在のVue.js 2系ではtemplateに複数のルート要素を記述することは出来ません。
もしコンポーネントに複数のルート要素をもたせたい場合は、render関数を使用する必要があります。

render (h) {
  return [
    h('div', 'one'),
    ...this.$slots.default, // 配列の展開
    h('div', 'two')
  ]
}

余談ですが、自分の知る限りVue.js 3系ではtemplate内部でも複数のルート要素を持てるサポートが追加される予定です。

---

関連リンク

• 公式サイト(描画関数とJSX)
• 公式サイト(vm.$slots)
• 関連するGithub Issues
• サードパーティのWork around（メンテされていない）