老师,请问

老师,请问

怎么理解根组件和子组件?我看网上说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>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕久久 2021-06-03 16:44:58

同学你好,解答如下:

实际开发vue项目时,写法并不是同学提供的这种形式,而是用脚手架等工具搭建出来的完整项目。搭建出来的项目中只会有一个“<div id="app"></div>”这样的挂载点,因此html中只能挂载一个组件,该组件才是真正意义上的根组件。

同学的这种写法中,可以手动添加多个挂载点,比如:

http://img1.sycdn.imooc.com//climg/60b8957f09f0a55904570122.jpg

对应着可以挂在多个组件,此时这些组件可以称为“根组件”,但是却不具备唯一性。

因此提到根组件,一般都对应着“脚手架等工具搭建出来的项目”(挂载点唯一)。同学可以往后学,在项目中,可能就体会的深一些了。

祝学习愉快!

好帮手慕久久 2021-06-03 15:56:54

同学你好,解答如下:

严格来讲,app应该称为“vue应用”,它被挂载到页面上后会形成根组件,即vm才是真正的根组件实例(mount方法的返回值是“根组件实例”)。由于根组件的具体内容是在app中定义的,所以有时候也会说app是根组件,但是这种说法并不严格,只是容易理解一些。

祝学习愉快!

  • 提问者 Dreams乄深巷 #1

    那老师,也就是说每个挂载到页面的都算根组件?如果我有两个div,在上面分别绑定一个vue应用,那是不是就有两个根组件?

    2021-06-03 15:59:43
好帮手慕久久 2021-06-03 15:29:09

同学你好,解答如下:

1、“根组件”就是整个页面中,最上层的组件,即被挂载到html页面上的那个组件。同学的例子中,app这个组件被挂载到了页面的div#id上:

http://img1.sycdn.imooc.com//climg/60b8832e0987946308220536.jpg

所以app是根组件。

2、如下代码是在app组件上,创建子组件:

http://img1.sycdn.imooc.com//climg/60b8841c0905da6805170103.jpg

所以hello和world都是子组件。

或者可以如下这样看:

app组件中使用了hello和world,那么hello和world就是app的子组件:

http://img1.sycdn.imooc.com//climg/60b8846a096d797907360157.jpg

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师