首页 > 其他分享> > vue3 基础-全局组件和局部组件

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

2022-09-03 01:31:09 作者：互联网

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

形象地理解组件

就和盖房子一样的, 可以将房子粗略拆分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