Vue 中有 React.Fragment 之类的东西吗？

IT技术 reactjs vue.js fragment
2021-05-06 12:59:40

在 React 中，我可以做这样的事情： 

// parent component
export default (){
  return (
     <div>
       <div>1</div>
       <ChildComponent />
       <div>5</div>
     </div>
  );
}

// child component
export default (){
  return (
     <React.Fragment>
       <div>2</div>
       <div>3</div>
       <div>4</div>
     </React.Fragment>
  );
};

// compiled html tags in browser .
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

但是在 Vue 中，当我做同样的事情时，事情就不同了。

// parent component
<template>
    <div>
        <div>1</div>
        <child-component />
        <div>5</div>
    </div>
</template>

<script>
    import childComponent from 'path/to/childComponent';
    export default {
      components: { childComponent }
    }
</script>
-------------------------------------------------------------
// child component
<template>
    <div id='have_to_write_in_vue'>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    <div>
</template>

// compiled html tags in browser .
<div>1</div>
<div id='have_to_write_in_vue'>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<div>5</div>

不同之处在于 Vue 中的“DIV”标签不在同一级别。我该如何处理？

我问这是因为出现无用嵌套时出现问题。

4个回答

视图 2

Vue-fragment包促进了 vue 2 的无根组件。

视图 3

Vue 3 官方支持多根节点组件（片段） https://v3.vuejs.org/guide/migration/fragments.html

Vue 中缺少第一方 Fragment 组件让我发疯！

我看过vue-fragmentnpm 包，但它让我对他们做了多少感到紧张，觉得必须有更好的方法。

我想出了一些非常轻量级的东西......它起作用是因为允许功能组件返回多个根节点。

然而，这不像 Reacts 那样 100% 有效。例如，在 React 中，您实际上可以使用 aReact.Fragment作为应用程序中的根节点。当你已经在一个组件中时，这似乎只在 Vue 中工作（即：它不能是你的基本组件的根节点）。

const Fragment = {
  functional: true,
  render: (h, ctx) => ctx.children
}

使用它...

<Fragment>
  <div>Div 1</div>
  <div>Div 2</div>
</Fragment>

超级好用...

{someCondition && (
  <Fragment>
    <div>yay i can use multiple nodes</div>
    <div>:)</div>
  </Fragment>
)}

<div>
  Some inline text {condition ? (
    <Fragment>now I can use <strong>html</strong> and {variables}</Fragment>
  ) : (
    <Fragment>So many possibilities</Fragment>
  )}
</div>

显然，Vue.js v3 现在支持开箱即用的片段：Fragments（Vue.js 文档）

Vue v3

这是@Roi 对 Vue v3 的回答的简单改编。

正如@dakujem 所提到的，Vue v3 支持开箱即用的多根组件。但是它不支持深度嵌套的片段。

更新：你可以嵌套<template>！


<template>
  <div>
    <ul>
      <li>A</li>
      <li>B</li>
      <template>
        <li>C</li>
        <li>D</li>
      </template>
    </ul>
  </div>
</template>
其它你可能感兴趣的问题
上一篇React 16.7 Hooks：`react.useState` 不是一个函数 下一篇如何将本地文本文件加载到 ReactNative 项目中的字符串变量中？