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

形象地理解组件

就和盖房子一样的, 可以将房子粗略拆分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. Deepseek学习随笔（7）--- 构建私人知识库（附网盘链接）

    Step 1:创建知识库 入口定位 登录 DeepSeek 控制台 → 左侧导航栏点击「知识库」→ 点击「新建知识库」按钮 基础设置 知识库名称:建议使用「领域+用途」命名法,如「医疗-糖尿病文献库」 ...

  2. D pid(16916) tid(19140) 14:05:45 EdgeSnapFeature::PostExitSizeMove: WM_TWINVIEW_SHOW_GRIDLINES -> off

    D pid(16916) tid(19140) 14:05:45 EdgeSnapFeature::PostExitSizeMove: WM_TWINVIEW_SHOW_GRIDLINES -> ...

  3. Docker - 部署zyplayer_doc团队协作文档

    原文链接:https://mp.weixin.qq.com/s/ew3O0EKLo8KoOMkpT-IePw 一.介绍   zyplayer-doc是一款适合企业和个人使用的WIKI知识库管理工具,提 ...

  4. AI与.NET技术实操系列（二）：开始使用ML.NET

    引言 在当今技术飞速发展的时代,机器学习(Machine Learning, ML)已成为推动创新和变革的核心力量.从智能推荐系统到自动化决策工具,ML的应用无处不在,深刻影响着我们的生活和工作方式. ...

  5. 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本地AI Agent

    一.天价邀请码VS开源革命:打工人今夜无眠 昨夜科技圈被两个关键词刷屏:​Manus激活码炒至5万元5,7,​GitHub神秘项目OpenManus突然开源6,7.这场戏剧性对决的背后,是一场关于「A ...

  6. minecraft mods descrip

    1. [Advanced Finders]矿物探测器 mod 显示玩家周围附近矿石的方向(指针显示水平面上可到达的矿石) 探测地下深部矿脉(箭头显示最近矿脉的方向(上/下)) 发现大型矿床时发出信号( ...

  7. docker 配置安装宝塔面板

    宝塔镜像 https://hub.docker.com/r/btpanel/baota 配置宝塔 第一步:创建一个名为 bt-data 的目录,此目录将存储宝塔数据. $ mkdir bt-data ...

  8. mac mamp php扩展安装

    官网下载需要开启的php扩展 PHP扩展下载官网地址 解压扩展包,指定mamp所使用的php版本的phpize编译安装 # 在解压的扩展包中执行以下命令 /Applications/MAMP/bin/ ...

  9. 关于能否用DeepSeek做危险的事情，DeepSeek本身给出了答案

    AI教父辛顿说DeepSeek允许本地部署的话可能会导致用户用DeepSeek来做一些危险的事情(https://t.cj.sina.com.cn/articles/view/7879923924/m ...

  10. Joker 智能开发平台再推重磅新品，引领开发新潮流

    自 Joker 智能开发平台的前端可视化版本惊艳亮相后,便迅速在行业内掀起热潮,其创新的理念与出色的性能,为开发者和企业打造了高效.便捷的开发新路径,备受瞩目与好评.如今,Joker 智能开发平台即将 ...