提问人：3m1n3nc3 提问时间：6/15/2023 更新时间：7/15/2023 访问量：842
我可以在 vue 中使用空的 <></> 标签吗
Can I use empty <></> tags in vue
问：
例如，如果一个组件有多个子元素或组件，它们应该嵌套在单个父标签中，但这可能不是我想要的，React 允许在这种情况下使用空标签，这里是一个实例：<div></div><></>
function Example() {
return (
<>
<RadioGroup defaultValue={placement} onChange={setPlacement}>
<Stack direction='row' mb='4'>
<Radio value='top'>Top</Radio>
<Radio value='right'>Right</Radio>
<Radio value='bottom'>Bottom</Radio>
<Radio value='left'>Left</Radio>
</Stack>
</RadioGroup>
<RadioGroup defaultValue={placement} onChange={setPlacement}>
<Stack direction='row' mb='4'>
<Radio value='top'>Top</Radio>
<Radio value='right'>Right</Radio>
<Radio value='bottom'>Bottom</Radio>
<Radio value='left'>Left</Radio>
</Stack>
</RadioGroup>
</>)
}
我的问题是，这种方法也可以用在 Vue 中吗？我似乎在文档中找不到任何对它的引用。如果这是不可能的，有没有解决方法？
答：
3赞
Luciano Griffa
6/15/2023
#1
我的理解是，你不能像 React 那样直接使用空标签语法，但在 Vue 中还有其他方法可以实现类似的结果。<></>
一种选择是使用组件包装多个元素，而无需向 DOM 添加额外的标签。该组件不呈现为 HTML 标记，并允许将元素组合在一起，而无需将另一个元素添加到生成的元素树中。<template><template>
以下是如何使用它的示例：
<template>
<RadioGroup defaultValue={placement} onChange={setPlacement}>
<Stack direction='row' mb='4'>
<Radio value='top'>Top</Radio>
<Radio value='right'>Right</Radio>
<Radio value='bottom'>Bottom</Radio>
<Radio value='left'>Left</Radio>
</Stack>
</RadioGroup>
<RadioGroup defaultValue={placement} onChange={setPlacement}>
<Stack direction='row' mb='4'>
<Radio value='top'>Top</Radio>
<Radio value='right'>Right</Radio>
<Radio value='bottom'>Bottom</Radio>
<Radio value='left'>Left</Radio>
</Stack>
</RadioGroup>
</template>
请记住，在 Vue 中，保持 组件并确保元素嵌套 根据 Vue 的语法规则正确。
0赞
Marek Kamiński
7/12/2023
#2
关于 vue 中的片段（没有直接对应物） https://blog.logrocket.com/fragments-in-vue-js/
还有这个 https://www.npmjs.com/package/vue-fragment
0赞
3m1n3nc3
7/15/2023
#3
在对需求感到沮丧和修补的几周后，我想出了一个相当简单、直接的解决方案，不需要我安装任何第三方库。
我创建了一个名为 VFragment 的新组件
将其添加为全局组件，以便于重用main.js
该组件仅包含模板和默认插槽：
<template>
<slot></slot>
</template>
这样，我可以用作根组件，而不会有额外 div 的膨胀，同时将任何其他元素或组件作为 .<v-fragment></v-fragment><v-fragment></v-fragment>
评论