时间戳

首页 > 解决方案 > Vue 中有类似 React.Fragment 的东西吗？

reactjs - Vue 中有类似 React.Fragment 的东西吗？

问题描述

在 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”标签不在同一级别。我该如何处理？

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

标签： reactjsvue.jsfragment

解决方案

Vue 2

Vue-fragment包为 vue 2 提供了无根组件。

视图 3

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

推荐阅读