关于Vue中根组件与组件树的理解

发布时间:2025-01-02 19:14

在观看了b站的关于Vue3的教学视频后,对Vue的根组件与组件树进行简单的总结下

一、实例化Vue应用

// 此时,app就是一个Vue应用的实例,或者说是一个对象 const app = Vue.createApp({})

需要注意的是这个app并不是根组件,而是Vue应用的实例

二、根组件的挂载

了解组件的话,我们知道在组件中,一般都会有一个template属性,那么根组件的template是什么呢?这里就需要提到我们的挂载了

<div id="app"></div> <script> app.mount("#app"); //这样其实就是表示根组件的template就是上面的id为app的标签内的内容,修改其中的内容,就是修改template的内容。 </script>

而我们要找的根组件其实就是app.mount()的返回

const root_component = app.mount("#app")

三、组件树的认识

可以通过一个简单的例子来了解一下

<div id="app"> <component1></component1> <component1></component1> </div> <script> //根组件 const app = Vue.createApp({}) app.component("component1",{ template:` <h1>hello component</h1> <component2></component2> ` }) app.component("component2",{ template:` <h2>i am component2</h2> ` } app.mount("#app") //注意这里要写在最后,不然组件无法生效 </script>

包含关系类似于下面的第一张图
组件图
而其中的树状关系可以表示如下:
组件树

四、结语

由于是初次学习,也许有不正确的地方,还请大家能够指出,共同学习,谢谢。

网址:关于Vue中根组件与组件树的理解 https://mxgxt.com/news/view/639475

相关内容

什么是组件,以及前端各种框架组件的使用方法
Vue与Element UI:紧密的伙伴关系
架构、框架、组件、插件浅谈理解
vue
如何快速的vue init 属于自己的vue模板?
组件
OpenStack StarlingX 组件详解
光伏组件模块
软件架构、框架、模式、模块、组件、插件概念汇总
小组件是什么意思

随便看看