组件和页面的关系可以理解为, 组件是页面的一部分.

形象地理解组件

就和盖房子一样的, 可以将房子粗略拆分3个组件(组成部分) 房顶, 房身, 地基. 同时房顶又可以拆分 ..... 这样在极限的情况下, 房子可以拆分为每块砖, 一块砖就是一个组件, IT小哥哥其实就是搬砖人实锤.

即拆分如下:

  • 整个页面根组件, 即可对应右图最上的根节点
  • 进一步可将整个页面分为3个区域: 顶部的横栏, 左侧内容区, 右侧内容区. 这恰好对应右图的3个组件节点
  • 左侧内容区又可分为2个深灰色内容区, 即对应右图第三层的3个组件节点
  • 右侧内容区又可分为3个深灰色内容区, 即对应右图第三层右侧的3个组件节点

这样就将页面拆分为多个区域, 每个区域对应一个组件, 即 "组件就是页面的一部分". 从 vue 来说, 每个组件即编写为一个以 .vue 为后缀的单文件 (里面包含 模板 html, 逻辑 javascript, 样式 css . 这样来编写就有点写后端代理的感觉了, 拆分一很多小快快, 低耦合, 可维护性很高这样的.

根组件

const app = Vue.createApp({})

const vm = app.mount('#root')

这里只是创建了一个名为 app 的 vue 实例 或者应用, 当前还没有根组件的介入.

一旦写了在 createApp 中传入了 template 则就构成了当前应用的根组件 (告诉 vue 如何去渲染根组件相关页面)

const app = Vue.createApp({

    template: `<div>hello world</div>`

})

const vm = app.mount('#root')

这样就定义了 app 的根组件, 并显示了 hello world. 这时候如果我们想把其拆分为 2个部分, 即可 hello 和 world 都各自为一个组件. 这时候注意, 此时的页面就变成了1个根组件 + 2个子组件了. 因此我们可以全局注册两个组件, 演示如下:

<!DOCTYPE html>

<html lang="en">

<head>

  <title>组件初识</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      // 2. 在父组件 (这里也是根组件) 中去调用两个组件

      template: `

        <hello />

        <world />

      `

    })

    // 1. 注册两个全局子组件 "hello" 和 'world'

    app.component('hello', {

      template: '<div>hello</div>'

    })

    app.component('world', {

      template: '<div>world</div>'

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

这样通过独立编写 hello 和 world 两个组件并全局注册后, 则可以在父组件中进行调用, (先拆分, 再合并) 最后进行页面渲染, 这样的可维护性是极高的, 且解耦了:

hello

world

组件的复用性

即同一个组件有点像 api , 它是可以被重复用的, 和小工具一样, 而且互相之间是隔开的, 举个栗子如下:

<!DOCTYPE html>

<html lang="en">

<head>

  <title>组件复用</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      // 2. 子组件可以被重复调用且互不影响

      template: `

        <counter />

        <counter />

        <counter />

        <counter />

      `

    })

    // 1. 注册一个 couner 组件, 功能是, 每次点击页面数字则自增1

    app.component('counter', {

      data () {

        return { count: 666 }

      },

      template: '<div @click="count += 1">{{count}}</div>'

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

则页面会显示:

666

666

666

666

随意点击一个 666 被点击的数字则会自动加1, 注意的是这个虽然是相同组件, 但是数据是各自独立的, 不会实现藕断丝连的现象.

全局组件 app.component ( )

即只要通过 app.component ( ) 注册的组件即为全局的, 在任何地方都能用, 很方便. 但同时也会一直挂载在 app 上, 则会占用其资源, 性能也是有很多损耗哦.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>全局组件</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      // 3. 即便父组件不进行调用, 也会一直占着 app 资源的

      template: `

      <div>

        hello, youge!

        <counter-parent />

      </div>

      `

    })

    // 1. 先注册一个名为 counter 的组件, 功能是每次点击页面数字则自增1

    app.component('counter', {

      data () {

        return { count: 666 }

      },

      template: '<div @click="count += 1">{{count}}</div>'

    })

    // 2. 再注册一个名为 counter-parent 组件, 啥都不做就一个中转

    app.component('counter-parent', {

      template: `<counter />`

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>


hello, youge!

666

点击 666 的组件依然会生效, 且会一直挂载着, 因为是全局组件嘛.

局部组件

同全局组件时相对的, 要注册后才会挂载, 在实际工作中基本都是局部组件的方式来拆分功能. 从代码来看, 自定义一个局部组件就是一个对象而已. 然后通过在父组件中进行注册 (component) 即可使用.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>局部组件</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    // 1. 在父组件 app 之前先定义一局部组件 Counter, 即一个对象

    const Counter = {

      data() { return { count: 1 }

      },

      template: `<div @click="count += 1">{{count}}</div>`

    }

    const app = Vue.createApp({

      // 2. 在父组件进行注册即可使用, 要先定义后使用哦

      components: { Counter },

      template: `

      <div>

        <Counter />

      </div>

      `

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

学会使用局部组件的用法是最为关键的一步, 其实也蛮好理解:

  • 局部组件在编写上就一个对象而已, 里面可以写 data ( ), template : { } ... 等

  • 局部组件要先定义, 后再 app (或者父组件) 中进行注册 components: { } 后, 方可在父模板中进行使用

  • 局部组件在定义时, 建议首字母要大写这样可读性更高

小结

本篇讲的局部组件和全局组件的概念和理解极为重要, 几乎是 vue 的核心设计, 再来总结一波.

  • 组件即理解为是页面的一部分, 从实现上看即封装在一个 .vue 的单文件(模板, 逻辑, 样式) 中.
  • 组件是可以被复用的, 即很多共用功能是可以通过组件封装的.
  • 全局组件 app.component: { } 全局挂载, 性能不高, 使用简单.
  • 局部组件 components: { } 先定义, 再在父组件中注册, 再使用.
  • 局部用时可用一个自定义名字和真实组件映射 如 components:

vue3 基础-全局组件和局部组件的更多相关文章

  1. VUE3 之 全局组件与局部组件

    1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法  <body> < ...

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

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

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

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

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

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

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

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

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

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

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

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

  8. Vue基础学习 --- 全局组件与局部组件

    组件分为 全局组件 局部组件 全局组件 // 语法---Vue.component('组件名', {组件参数}) Vue.component('com1', { template: '<butt ...

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

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

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

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

随机推荐

  1. SHA1字符串加密

    使用SHA1算法,生成某个字符串的hash值作为该字符串所代表对象的唯一标识: Demo: using System; using System.Collections.Generic; using ...

  2. Thymeleaf遍历选中多个复选框

    使用场景:用户角色一对多关联关系 <!-- roleList:所有角色信息 :userRoleList:用户已有角色id列表--> <input th:each="role ...

  3. Spark - [04] RDD编程

    题记部分 一.RDD编程模型   在 Spark 中,RDD 被表示为对象,通过对象上的方法调用来对 RDD 进行转换.经过一系列的 transformations 定义 RDD 之后,就可以调用 a ...

  4. C# 图形界面编程之 FlowLayoutPanel 界面闪烁问题解决

    公司需要我写几个GUI程序,让虚拟机(guest)内部可以控制虚拟机(host)外部的硬件. 控制外部的硬件的方法就是开一个串口,这样虚拟机与宿主机就可以相互通讯,此时就可以让虚拟机发送命令,宿主机执 ...

  5. Vitepress+EdgeOne Pages快速迁移旧网站内容

    Vitepress+EdgeOne Pages快速迁移旧网站内容 目录 Vitepress+EdgeOne Pages快速迁移旧网站内容 下载旧网站文章.图片 网站文章转Markdown Vitepr ...

  6. 百万架构师第四十六课：并发编程的原理(一)｜JavaGuide

    百万架构师系列文章阅读体验感更佳 原文链接:https://javaguide.net 并发编程的原理 课程目标 JMM 内存模型 JMM 如何解决原子性.可见性.有序性的问题 Synchronize ...

  7. Apache Tomcat RCE漏洞复现（CVE-2025-24813）

    漏洞描述 该漏洞的核心在于不完整PUT请求上传时 Tomcat 会使用了一个基于用户提供的文件名和路径生成的临时文件,且路径分隔符被替换为 . . 若同时满足以下条件,攻击者可执行任意代码: 默认 S ...

  8. 无法解析@NotBlank

    当碰到无法解析的时候,一般都是地址写错了,找不到相应的路劲 我是全局能搜到这个包@NotBlank,在jakarta.validation-api包里面,但是我网上搜https://www.cnblo ...

  9. CentOS7安装图形界面模式

    0.9272019.03.24 15:17:05字数 865阅读 22,115 本人通过VMware14安装Centos7.6过程中出现蓝屏现象,最后发现是因为在系统安装图形界面过程中报错导致,所以决 ...

  10. DELPHI 检测服务器地址是否有效

    利用DELPH 的ICMP控件检测服务器地址 function CheckNetServer():Boolean; begin IdIcmpClient1.Host := '192.168.1.230 ...