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


Posted in Javascript onFebruary 10, 2020

如果你试图创建一个没有根结点的 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>

我也不清楚这个插件对于所有用例的健壮性如何,但从我自己的尝试来看,用起来还不错!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享一个asp.net pager分页控件
Jan 04 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 #Javascript
JavaScript canvas仿代码流瀑布
Feb 10 #Javascript
Vue数字输入框组件使用方法详解
Feb 10 #Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 #Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 #Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 #Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 #Javascript
You might like
如何判断php数组的维度
2013/06/10 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
php bootstrap实现简单登录
2016/03/08 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
python的命名规则知识点总结
2019/10/04 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Python os模块常用方法和属性总结
2020/02/20 Python
基于Python实现简单学生管理系统
2020/07/24 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
白酒市场开发计划书
2014/01/09 职场文书
大学生村官工作感言
2014/01/10 职场文书
企业职业病防治方案
2014/05/29 职场文书
中秋节寄语2015
2015/03/24 职场文书
送达通知书
2015/04/25 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
活动新闻稿范文
2015/07/17 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
Python 全局空间和局部空间
2022/04/06 Python