VUE3 之 全局组件与局部组件
1. 概述
老话说的好：忍耐是一种策略，同时也是一种性格磨炼。
言归正传，今天我们来聊聊 VUE 的全局组件与局部组件。
2. 全局组件
2.1 不使用组件的写法
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({
template:`
<div>
<div>hello</div>
<div>zhuifengren</div>
</div>
`
});
const vm = app.mount("#myDiv");
这是我们之前不使用组件的写法，接下来我们用组件去实现相同的效果。
2.2 使用组件
const app = Vue.createApp({
template:`
<div>
<hello-com />
<zhuifengren-com />
</div>
`
});
app.component('hello-com', {
template: `
<div>hello</div>
`
});
app.component('zhuifengren-com', {
template: `
<div>zhuifengren</div>
`
});
我们把之前的 <div>hello</div> 和 <div>zhuifengren</div> 分别封装在了组件中，然后直接将组件名作为标签即可。
组件名称的命名规范：建议使用全小写字母，单词之间使用 “-” 连接。
2.3 组件中包含变量
const app = Vue.createApp({
template:`
<div>
<count-com />
</div>
`
});
app.component('count-com', {
data() {
return {
count : 1
}
},
template: `
<div>{{count}}</div>
<button @click="count += 1">加1</button>
`
});
2.4 组件的复用
const app = Vue.createApp({
template:`
<div>
<count-com />
<count-com />
<count-com />
</div>
`
});
从这个例子能看出来，组件的好处就是可以复用，且组件中的变量是独享的。
2.5 组件中使用组件
const app = Vue.createApp({
template:`
<div>
<count-com />
<count-com />
<count-com />
<count-com-2 />
</div>
`
});
app.component('count-com-2', {
template: `
<count-com />
`
});
我们在另一个组件 count-com-2 中使用 count-com 组件，也是可以的。
2.6 总结
全局组件，使用起来很简单，只需要使用 app.component 函数声明一下即可。
一个全局组件可以被另一个全局组件使用。
但全局组件，只要声明，即使不使用也会被初始化，影响性能。
3. 局部组件
3.1 局部组件的使用
<body>
<div id="myDiv"></div>
</body>
<script>
const CountCom = {
data() {
return {
count : 1
}
},
template: `
<div>{{count}}</div>
<button @click="count += 1">自增</button>
`
}
const app = Vue.createApp({ // 组件映射
components : {
'count-com': CountCom
},
template:`
<div>
<count-com/>
</div>
`
}); const vm = app.mount("#myDiv");
局部组件的写法是，首先声明一个对象，内容和全局组件类似，然后将组件与对象做一个映射。
3.2 总结
局部组件声明的对象建议首字母大写，单词间使用驼峰命名。
映射时，组件的名称还保持全小写字母，单词之间使用 “-” 连接。
局部组件，如果不使用，就不会初始化，因此对性能有好处。
4. 综述
今天聊了一下 VUE3 的 全局组件与局部组件，希望可以对大家的工作有所帮助
欢迎帮忙点赞、评论、转发、加关注 ：）
关注追风人聊Java，每天更新Java干货。
5. 个人公众号
追风人聊Java，欢迎大家关注
VUE3 之 全局组件与局部组件的更多相关文章
- Vue 组件&组件之间的通信 之全局组件与局部组件
在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...
- vue -全局组件和局部组件
1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...
- vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件 关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- vue中的全局组件和局部组件的应用
1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...
- vue.js中的全局组件和局部组件
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...
- vue（3）—— vue的全局组件、局部组件
组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...
- Vue组件之全局组件与局部组件
1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...
随机推荐
- 甘特图中与任务有关的操作（Project）
<Project2016 企业项目管理实践>张会斌 董方好 编著 任务建好了不是马上就没事了,后面还有各种事,比如像我这种粗心的,冷不丁就会冒出个"通假字"什么的,难道 ...
- LuoguP7189 [COCI2007-2008#6] PARKING 题解
Content 有 3 辆卡车,第 \(i\) 辆卡车停车开始时间为 \(l_i\),结束时间为 \(r_i\)(不包含).现在有以下收费方式: 停车辆数 每分钟每辆车单价 \(1\) \(a\) \ ...
- 当ligerui的grid出现固定列与非固定列不在同一水平线上时，改怎么处理
当ligerui的grid出现固定列与非固定列不在同一水平线上时,如下图所示: 此时可以增加fixedCellHeight:false属性进行解决.这个属性在IE上不起作用,那么该怎么处理,可以这样处 ...
- 【LeetCode】LCP 07. 传递信息
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 BFS 日期 题目地址:https://leetcod ...
- Android 控件使用教程（二）—— RecyclerView 展示图片
简介 在上一篇博文中,介绍了大家已经很熟悉的布局控件ListView,在这篇文章中,我将使用比较新.功能也更强大的RecyclerView. RecyclerView 首先,要用这个控件,你需要在gr ...
- P1547逆转，然后再见
描述 上届的高三在这个暑假终于要到各个城市奔向他们的大学生活了.奇怪的是学校这次异常阔气,说要用三台车子去载他们上学.上届高三的师兄们异常兴奋--可惜的是临行的时候,学校终于露出它"狰狞&q ...
- Redis 的 3 种集群方案对比
数据持久化 主从复制 自动故障恢复 集群化 数据持久化本质上是为了做数据备份,有了数据持久化,当Redis宕机时,我们可以把数据从磁盘上恢复回来,但在数据恢复之前,服务是不可用的,而且数据恢复的时间取 ...
- 「算法笔记」快速数论变换（NTT）
一.简介 前置知识:多项式乘法与 FFT. FFT 涉及大量 double 类型数据操作和 \(\sin,\cos\) 运算,会产生误差.快速数论变换(Number Theoretic Transfo ...
- rabbitmq集群和镜像队列
Rabbitmq集群和镜像队列 1引言 1.1编写目的 2 原理和使用 2.1镜像队列原理 2.1.1 原理 默认的一个rabbitmq中的queue是在一个node上的,至于在那个node上取决于c ...
- Java基础周测题，输入一个整数，输出所有能整除该整数的结果：
需求说明: 输入一个整数,输出所有能整除该整数的结果: 实现代码: package demo; import java.util.Scanner; public class test1 { publi ...