关于Vue中根组件与组件树的理解
在观看了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中根组件与组件树的理解的更多相关文章
- (vue.js)vue中引用了别的组件 ,如何使this指向Vue对象
Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...
- Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
- Vue中的8种组件通信方式
Vue是数据驱动视图更新的框架,所以对于vue来说组件间的数据通信非常重要. 常见使用场景可以分为三类: 父子组件通信: props / $emit $parent / $children provi ...
- 动手实现一个vue中的模态对话框组件
写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...
- vue中的单文件组件
之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为 ...
- vue中动态加载组件+开发者模式+JS参数值传递和引用传递
今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...
- vue中excel导入导出组件
vue中导入导出excel,并根据后台返回类型进行判断,导入到数据库中 功能:实现js导入导出excel,并且对导入的excel进行展示,当excel标题名称和数据库的名称标题匹配时,则对应列导入的数 ...
- Vue中怎样使用swiper组件?
我用的VS Code编译器,首先打开终端,进入项目(我是在13-vue文件夹下面的elem中使用) D:\study\web\13-vue\elem> cnpm install vue-awes ...
- vue中如何在自定义组件上使用v-model和.sync
自定义事件 tips 推荐始终使用 kebab-case 的事件名.(v-on会将事件名自动转换为小写,避免匹配不到) changeData × change-data √ 自定义组件的v-model ...
随机推荐
- typescript接口---interface
假如我现在需要批量生产一批对象,这些对象有相同的属性,并且对应属性值的数据类型一致.该怎么去做? 在ts中,因为要检验数据类型,所以必须对每个变量进行规范,自然也提供了一种批量规范的功能.这个功能就是 ...
- 记录一次成功CICD完整亲身实践从此踏进入Devops大门
Devops概念 DevOps 强调通过一系列手段来实现既快又稳的工作流程,使每个想法(比如一个新的软件功能,一个功能增强请求或者一个 bug 修复)在从开发到生产环境部署的整个流程中,都能不断地为用 ...
- 任务信息的高级选项(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 张同学说,[高级]选项卡很重要,嗯,本妖深以为然! 这里的[高级]选项卡,是指[任务信息]里的,在默认视图下,只要双击某任 ...
- CF1041B Buying a TV Set 题解
Content 给定四个数 \(a,b,c,d\),求满足以下条件的数对 \((x,y)\) 的个数: \(x\leqslant a,y\leqslant b\). \(\dfrac{x}{y}=\d ...
- Tornado WEB服务器框架 Epoll-- 【模板】
4.2 使用模板 1. 路径与渲染 使用模板,需要仿照静态文件路径设置一样,向web.Application类的构造函数传递一个名为template_path的参数来告诉Tornado从文件系统的一个 ...
- JAVA调用微信接口实现页面分享功能(分享到朋友圈显示图片,分享给朋友)
钉钉提供的内网穿透之HTTP穿透:https://www.cnblogs.com/pxblog/p/13862376.html 网页分享到微信中如何显示标题图,如果自定义标题图,描述,显示效果如下 官 ...
- JAVA通过经纬度获取两点之间的距离
private static double EARTH_RADIUS = 6378.137; private static double rad(double d) { return d * Math ...
- JAVA携带参数(带有请求参数,请求头参数)直接发送POST请求
<dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpcl ...
- 【LeetCode】951. Flip Equivalent Binary Trees 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 日期 题目地址:https://leetcod ...
- 【LeetCode】867. Transpose Matrix 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 先构建数组再遍历实现翻转 日期 题目地址:https ...