请教个关于 vue3 中根节点需不需的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 845 天前的主题，其中的信息可能已经有所发展或是发生改变。

vue 新手，最近在写 demo 时遇到个问题困惑着我，像请教下大家

vue2 中每个组件的的模板必须有一个根节点，vue3 就是非必须，但我实际测试也必须套个 div ，这是为什么？

下面的 son 组件中如果没有根节点，在实际网页中 vue 就不会为其渲染一个容器 div 包裹其模板中标签，导致我在其父组件中直接设置在子组件上的宽高失效

// son 组件
<template>
	<span>我是 son 组件</span>
	<span>我是 son 组件</span>
</template>

// father 标签
<template>
	<span>我是 father 组件</span>
	<son class="son" />
</template>

<style scoped>
.son {
	width: 100px;
	height: 100px;
	background-color: pink;
}
</style>

// vue 渲染出的 html 结构，子组件中没有承载高度的 div
<div id="app" data-v-app>
	<span data-v-7ba5bd90<template>
	<div>
		<span>我是 son 组件</span>
		<span>我是 son 组件</span>
	</div>

当我给 son 组件添加一个根标签后，因为最外层有个宽高承载对象，我设置的宽高就会生效

// son 组件
<template>
	<div>
		<span>我是 son 组件</span>
		<span>我是 son 组件</span>
	</div>
</template>

// father 组件
<template>
	<span>我是 father 组件</span>
	<son class='son'/>
</template>

<style scoped>
.son {
	width: 100px;
	height: 100px;
	background-color: pink;
}
</style>

// vue 渲染出的 html 结构，有承载样式的 div ，son 组件身上的宽高和背景色生效
<div id="app" data-v-app>
	<span data-v-7ba5bd90>我是 father 组件</span>
	<div class="son" data-v-7ba5bd90>
		<span>我是 son 组件</span>
		<span>我是 son 组件</span>
	</div>
</div>

那 Vue3 允许模板没有根节点有啥意义呢？大多情况下，只要是需要为子组件设置大小，岂不是都需要为子组件添加一个根节点？

另一个问题：

如果子组件必须有一个根节点，那为 son 组件标签设置宽高样式是像上面那样设置在其 father 组件的 style 中，还是像下面设置在自身的 style 中呢？

// son 组件
<template>
	<div class='container'>
		<span>我是 son 组件</span>
		<span>我是 son 组件</span>
	</div>
</template>

<style scoped>
.container {
	width: 100px;
	height: 100px;
	background-color: pink;
}
</style>

// father 组件，只设置布局，不设置 son 组件的宽高
<template>
	<span>我是 father 组件</span>
	<son class='son'/>
</template>

<style scoped>
.son {
	float:right;
}
</style>

son 组件把宽高设置在自身，那可以保证每个使用 son 组件的人拿到的 son 组件的大小都是一致的，不用重复的去设置，但有个问题是 son 组件的布局样式又写到 father 组价上，一个标签(把组件当做 html 标签看)的样式被放到两个地方会不会有些混乱？

像上面那样如果把宽高和布局都设置在 father 组件中，也会有个问题，组件的大小一般不是固定死吗？方便每个人使用都一样？写到 father 组件中感觉怪怪的，而且 son 组件每用到一次，就要在其使用的父组件中再设置一遍宽高，岂不是很麻烦？

所以实际开发中应该大家都使用哪种方式呢？

span

组件

son

div

5 条回复 • 2022-07-14 16:23:21 +08:00