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

形象地理解组件

就和盖房子一样的, 可以将房子粗略拆分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. Paxos算法：如何解决分布式系统中的共识问题？

    背景 Paxos 算法是 Leslie Lamport(莱斯利·兰伯特)在 1990 年提出了一种分布式系统 共识 算法.这也是第一个被证明完备的共识算法(前提是不存在拜占庭将军问题,也就是没有恶意节 ...

  2. DeepSeek企业级部署实战指南：从服务器选型到Dify私有化落地

    对于个人开发者或尝鲜者而言,本地想要部署 DeepSeek 有很多种方案,但是一旦涉及到企业级部署,则步骤将会繁琐很多. 比如我们的第一步就需要先根据实际业务场景评估出我们到底需要部署什么规格的模型, ...

  3. Convert byte array to short array in C#

    Create the short array at half the size of the byte array, and copy the byte data in: short[] sdata ...

  4. EasyExcel合并行处理并优化

    业务场景 由于业务需要导出如下图中订单数据和订单项信息,而一个订单对应多个订单项,所以会涉及到自定义合并行 1.简单处理项目使用的EasyExcel,经查找发现Excel种有个AbstractMerg ...

  5. WPF调用FishSpeech的Demo

    写了一个FishSpeech的教程:使用FishSpeech进行语音合成推理 - 天命小猪 - 博客园 研究了一下如何调用服务器API,朗读文本. 经过调研,决定使用NAudio库播放音频.遇到了一些 ...

  6. Kubernetes - [04] 常用命令

    kubectl 语法 kubectl [command] [TYPE] [NAME] [flags] command:指定在一个或多个资源商要执行的操作.例如:create.get.describe. ...

  7. Hadoop - [04] 分布式部署

    Zookeeper的分布式部署 >> Hadoop的分布式部署 一.集群规划 主机名 node01 node02 node03 JDK ○ ○ ○ Zookeeper ○ ○ ○ Name ...

  8. springboot项目发布war包

    1:修改pom.xml 将"jar"改为"war" <packaging>war</packaging> 将: <dependen ...

  9. SpringCloud带你走进微服务的世界

    认识微服务 随着互联网行业的发展,对服务的要求也越来越高,服务架构也从单体架构逐渐演变为现在流行的微服务架构.这些架构之间有怎样的差别呢? 单体架构 单体架构:将业务的所有功能集中在一个项目中开发,打 ...

  10. k8s 报错： node(s) didn't match Pod's node affinity.

    前言 k8s集群中,有pod出现了 Affinity ,使用 kubectl describe pod 命令,发现了报错 2 node(s) didn't match Pod's node affin ...