vue3 基础-全局组件和局部组件

2022-09-03 01:31:09 阅读：168 来源： 互联网

标签：const app template vue3 组件全局 hello 页面

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

形象地理解组件

就和盖房子一样的, 可以将房子粗略拆分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 被点击的数字则会自动加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: { cj: Counter }

标签：const,app,template,vue3,组件,全局,hello,页面
来源： https://www.cnblogs.com/chenjieyouge/p/16651818.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3 基础-全局组件和局部组件