如果你试图创建一个没有根结点的 vue template, 像这样:
- <template>
- <div>Node 1</div>
- <div>Node 2</div>
- </template>
不出意外的话你会得到一个编译错误或者运行时错误, 因为 template 必须有一个根元素.
通常你可以在外面套一个 div 容器来解决. 这个容器元素没有显示上的作用, 只是为了满足模板编译的单个根节点的要求.
- <template>
- <div><!-- 我只是为了哄编译器开心 -->
- <div>Node 1</div>
- <div>Node 2</div>
- </div>
- </template>
通常情况下, 像这样加一个套也没什么大不了的, 但有时候确实需要多根结点的模板. 本文我们就来看看这种情况, 并提供一些可能的解决办法绕过这个限制.
渲染数组
在某些情况下, 可能需要用组件渲染子节点数组, 以包含在某个父组件中.
例如, 有些 CSS 特性要求特定的元素层级结构才能正确工作, 比如 CSS grid 或 flex. 在父子元素之间加一个容器是不可行的.
- <template>
- <!--Flex won't work if there's a wrapper around the children-->
- <div style="display:flex">
- <FlexChildren/>
- </div>
- </template>
还有一个问题是, 向组件添加包裹元素可能会导致渲染出无效的 html. 例如, 要构造一个 table, 表格行 < tr > 的子元素只能是 < td>.
- <template>
- <table>
- <tr>
- <!--Having a div wrapper would make this invalid HTML-->
- <TableCells/>
- </tr>
- </table>
- </template>
简而言之, 单个根结点的要求意味着用组件返回子元素的这种设计模式在 Vue 中行不通.
Fragments
单个根结点的限制在 React 中同样是个问题, 但是它在 16 版本中给出了一个解决方案, 叫做 fragments. 用法是将多个根结点的模板包裹在一个特殊的 React.Fragment 元素中:
- 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>
- </>
- );
- }
- }
Vue 中的 Fragments
Vue 中有类似的 fragments 吗? 恐怕短期内不会有. 其中的原因是虚拟 DOM 的比较算法依赖于单根节点的组件. 根据 Vue 贡献者 Linus Borg 的说法:
"允许 fragments 需要大幅改动比较算法...... 不仅需要它能正常工作, 还要求它有较高的性能...... 这是一项相当繁重的任务......React 直到完全重写了渲染层才消除了这种限制."
带有 render 函数的函数式组件
不过, 函数式组件没有这种单根结点的限制, 这是因为它不需要像有状态的组件那样用到虚拟 DOM 的比较算法. 这就是说你的组件只需要返回静态的 HTML(不太可能, 说实话), 这样就可以有多个根结点了.
还要注意一点: 你需要使用 render 函数, 因为 vue-loader 目前不支持多根节点特性 (相关讨论).
TableRows.JS
- export default {
- functional: true,
- render: h => [
- h('tr', [
- h('td', 'foo'),
- h('td', 'bar'),
- ]),
- h('tr', [
- h('td', 'lorem'),
- h('td', 'ipsum'),
- ])
- ];
- });
main.JS
- import TableRows from "TableRows";
- new Vue({
- el: '#app',
- template: `<div id="app">
- <table>
- <table-rows></table-rows>
- </table>
- </div>`,
- components: {
- TableRows
- }
- });
用指令处理
有个简单的办法绕过单根节点限制. 需要用到自定义指令, 用于操作 DOM. 做法就是手动将子元素从包裹容器移动到父元素, 然后删掉这个包裹容器.
之前
- <parent>
- <wrapper>
- <child/>
- <child/>
- </wrapper>
- </parent>
中间步骤
- <parent>
- <wrapper/>
- <child/>
- <child/>
- </parent>
之后
- <parent>
- <!--<wrapper/> deleted-->
- <child/>
- <child/>
- </parent>
这种做法需要一些技巧和工作量, 因此推荐使用一个不错的插件 vue-fragments 来完成, 作者是 Julien Barbay.
vue-fragments
vue-fragments 可以作为插件安装到 Vue 项目中:
- import {
- Plugin
- } from "vue-fragments";
- Vue.use(Plugin);
该插件注册了一个全局的 VFragment 组件, 可以用作组件模板的包裹容器, 跟 React fragments 的语法类似:
- <template>
- <v-fragment>
- <div>Fragment 1</div>
- <div>Fragment 2</div>
- </v-fragment>
- </template>
我也不清楚这个插件对于所有用例的健壮性如何, 但从我自己的尝试来看, 用起来还不错!
更多前端技术干货尽在微信公众号: 1024 译站
微信公众号: 1024 译站
来源: http://www.jianshu.com/p/c66f6b9e99cc