老师，请问
来源：2-8 前端组件化
Dreams乄深巷
2021-06-03 15:12:14
怎么理解根组件和子组件？我看网上说new Vue是根组件，但是通过我这个代码，我创建的app算不算根组件？还是说component是根组件？？下面两个hello和world都是子组件吧？
这边感念有点迷糊，还请老师讲的详细一点，谢谢老师！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>hello world</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.align-center {
text-align: center;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
template: `<div><hello /><world /></div>`,
});
app.component("hello", {
template: `<div>hello</div>`,
});
app.component("world", {
template: `<div>world</div>`,
});
const vm = app.mount("#app");
</script>
</html>
3回答
-
好帮手慕久久
2021-06-03
同学你好，解答如下：
实际开发vue项目时，写法并不是同学提供的这种形式，而是用脚手架等工具搭建出来的完整项目。搭建出来的项目中只会有一个“<div id="app"></div>”这样的挂载点，因此html中只能挂载一个组件，该组件才是真正意义上的根组件。
同学的这种写法中，可以手动添加多个挂载点，比如:
对应着可以挂在多个组件，此时这些组件可以称为“根组件”，但是却不具备唯一性。
因此提到根组件，一般都对应着“脚手架等工具搭建出来的项目”（挂载点唯一）。同学可以往后学，在项目中，可能就体会的深一些了。
祝学习愉快！
0 -
好帮手慕久久
2021-06-03
同学你好，解答如下：
严格来讲，app应该称为“vue应用”，它被挂载到页面上后会形成根组件，即vm才是真正的根组件实例（mount方法的返回值是“根组件实例”）。由于根组件的具体内容是在app中定义的，所以有时候也会说app是根组件，但是这种说法并不严格，只是容易理解一些。
祝学习愉快！
0h021-06-03 -
好帮手慕久久
2021-06-03
同学你好，解答如下：
1、“根组件”就是整个页面中，最上层的组件，即被挂载到html页面上的那个组件。同学的例子中，app这个组件被挂载到了页面的div#id上:
所以app是根组件。
2、如下代码是在app组件上，创建子组件：
所以hello和world都是子组件。
或者可以如下这样看：
app组件中使用了hello和world，那么hello和world就是app的子组件：
祝学习愉快！
0h021-06-03
相似问题