详解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 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 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中删除变量时unset()和null的区别分析
2011/01/27 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
php use和include区别总结
2019/10/13 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
python中函数传参详解
2016/07/03 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
运动会稿件200字
2014/02/07 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
项目投资建议书
2014/05/16 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers