vue 一个组件内多个弹窗_一个 Vue 模板可以有多个根节点(Fragments)?

最新推荐文章于 2024-05-05 08:00:00 发布

大风吹牛

最新推荐文章于 2024-05-05 08:00:00 发布

阅读量305

点赞数

文章标签： vue 一个组件内多个弹窗

本文链接：https://blog.csdn.net/weixin_32282271/article/details/112321444

版权

如果我们试图创建一个没有根节点的Vue模板，比如这样：

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

我们就会收到编译或运行时错误，因为模板必须具有单个根元素。

通常，我们通过在最外层包裹一层 div 来解决这个问题，但这个div元素一般没有啥使用，就是让模板符合单根需求。

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

这样的方式通常问题不在，但是在某些情况下，拥有多根模板是必要的。在本文中，我们来探讨一下何时需要以及如何解决多根的问题。

某些情况下，可能需要组件渲染子节点数组以包含在父组件中。

例如，一些CSS特性需要非常特殊的元素层次结构才能正确工作，比如CSS grid或flex，不能在父元素和子元素之间使用包装器。

<template>
  <div style="display:flex">
    
    <FlexChildren/>
  div>
template>

还有一个问题，在组件中添加包装元素可能会导致渲染无效的HTML。例如，如果要构建table，则表行必须仅具有用于子项的表单元格。

<template>
  <table>
    <tr>
      
      <TableCells/>
    tr>
  table>
template>

关注