详解Vue template 如何支持多个根结点

<template>
 <div>Node 1</div>
 <div>Node 2</div>
</template>

<template>
 <div><!--我只是为了哄编译器开心-->
  <div>Node 1</div>
  <div>Node 2</div>
 </div>
</template>

<template>
 <!--Flex won't work if there's a wrapper around the children-->
 <div style="display:flex">
  <FlexChildren/>
 </div>
</template>

<template>
 <table>
  <tr>
   <!--Having a div wrapper would make this invalid HTML-->
   <TableCells/>
  </tr>
 </table>
</template>

class Columns extends React.Component {
 render() {
  return (
   <React.Fragment>
    <td>Hello</td>
    <td>World</td>
   </React.Fragment>
  );
 }
}

class Columns extends React.Component {
 render() {
  return (
   <>
    <td>Hello</td>
    <td>World</td>
   </>
  );
 }
}

export default {
 functional: true,
 render: h => [
  h('tr', [
   h('td', 'foo'),
   h('td', 'bar'),
  ]),
  h('tr', [
   h('td', 'lorem'),
   h('td', 'ipsum'),
  ])
 ];
});

import TableRows from "TableRows";

new Vue({
 el: '#app',
 template: `<div id="app">
        <table>
         <table-rows></table-rows>
        </table>
       </div>`,
 components: {
  TableRows
 }
});

<parent>
 <wrapper>
  <child/>
  <child/>
 </wrapper>
</parent>

<parent>
 <wrapper/>
 <child/>
 <child/>
</parent>

<parent>
 <!--<wrapper/> deleted-->
 <child/>
 <child/>
</parent>

import { Plugin } from "vue-fragments";
Vue.use(Plugin);

<template>
 <v-fragment>
  <div>Fragment 1</div>
  <div>Fragment 2</div>
 </v-fragment>
</template>