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 之 全局组件与局部组件的更多相关文章

  1. Vue 组件&组件之间的通信 之全局组件与局部组件

    在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...

  2. vue -全局组件和局部组件

    1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...

  3. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  4. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  5. 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  6. vue中的全局组件和局部组件的应用

    1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...

  7. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

  8. vue（3）—— vue的全局组件、局部组件

    组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...

  9. Vue组件之全局组件与局部组件

    1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...

随机推荐

  1. [BUUCTF]REVERSE——firmware

    firmware 附件 步骤: 检查文件没有看出什么,ida载入一堆乱码,看了其他师傅的wp才知道要先binwalk对文件进行提取 120200.squashfs这是一个linux的压缩文件 我们需要 ...

  2. Java实现HttpGet和HttpPost请求

    maven引入JSON处理jar <dependency> <groupId>com.alibaba</groupId> <artifactId>fas ...

  3. MES目前应用很多，为什么APS计划排程系统应用很少？

    一.APS自动化计划排程能带来哪些效益? 1.提高订单准时交货率,提高客户满意度 2.缩短生产制造周期,提高生产效率 3.多品种.小批量.以销定产,快速解决插单.急单预测交期问题 4.减少物料采购提前 ...

  4. MeteoInfo-Java解析与绘图教程(七)_图层添加站点名称或区域名称

    MeteoInfo-Java解析与绘图教程(七)_图层添加站点名称或区域名称 在上文说了用自动站的数据经过插值绘制色斑图,这种一般是在geoserver上叠加图片呈现,但遇到后端导出图片,我们又想添加 ...

  5. C51单片机0~60计数器

    源码 #include<reg51.h> unsigned char code table[]={0x3f,0x06,0x5b,0x4f,0x66,0x6d,0x7d,0x07,0x7f, ...

  6. CF808A Lucky Year 题解

    Content 年份中有不超过 \(1\) 个非 \(0\) 数字的年份是幸运年份.现给出当前年份 \(n\),求到下一个幸运年份还要等多久. 数据范围:\(1\leqslant n\leqslant ...

  7. LuoguP7189 [COCI2007-2008#6] PARKING 题解

    Content 有 3 辆卡车,第 \(i\) 辆卡车停车开始时间为 \(l_i\),结束时间为 \(r_i\)(不包含).现在有以下收费方式: 停车辆数 每分钟每辆车单价 \(1\) \(a\) \ ...

  8. fcntl 加锁模块

    #!/usr/bin/python # coding:utf8 import os import sys import time import fcntl # 导入模块 class FLOCK(obj ...

  9. 【LeetCode】713. Subarray Product Less Than K 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/subarray ...

  10. 【LeetCode】911. Online Election 解题报告（Python）

    [LeetCode]911. Online Election 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ ...