详解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 相关文章推荐
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
javascript实现下雨效果
Mar 27 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
js实现无缝轮播图特效
May 09 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
JS实现纸牌发牌动画
Jan 19 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
Js基础学习资料
2010/11/23 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
详解webpack分包及异步加载套路
2017/06/29 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python中的多行注释文档编写风格汇总
2016/06/16 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
大学生党员自我批评
2014/02/14 职场文书
城管综合整治方案
2014/05/01 职场文书
英文推荐信格式范文
2014/05/09 职场文书
《去年的树》教学反思
2016/02/18 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js