老师,请问

老师,请问

怎么理解根组件和子组件?我看网上说new Vue是根组件,但是通过我这个代码,我创建的app算不算根组件?还是说component是根组件??下面两个hello和world都是子组件吧?

这边感念有点迷糊,还请老师讲的详细一点,谢谢老师!

1
<!DOCTYPE html><br><html lang="en"><br>  <head><br>    <meta charset="UTF-8" /><br>    <meta http-equiv="X-UA-Compatible" content="IE=edge" /><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><br>    <title>hello world</title><br>    <script src="https://unpkg.com/vue@next"></script><br>    <style><br>      .align-center {<br>        text-align: center;<br>      }<br>    </style><br>  </head><br><br>  <body><br>    <div id="app"></div><br>  </body><br>  <script><br>    const app = Vue.createApp({<br>      template: `<div><hello /><world /></div>`,<br>    });<br>    app.component("hello", {<br>      template: `<div>hello</div>`,<br>    });<br>    app.component("world", {<br>      template: `<div>world</div>`,<br>    });<br>    const vm = app.mount("#app");<br>  </script><br></html><br><br>


正在回答 回答被采纳积分+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下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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