Vue零基础教程|从前端框架到GIS开发系列课程（五）组件式开发

GIS开发特训营2024-12-17 9:28

Party1

简介

1) 什么是组件

组件可以理解成项目的零件

项目 就是由多个 组件 构成的

举例

  • 一个房子是一个Vue应用, 那么客厅/卧室/厨房/卫生间就是组件

  • 一个电脑是一个Vue应用, 那么硬盘/内存/主板/显示器/键盘就是组件

组件化思想

2) 为什么需要组件

将逻辑相近的功能模块封装到一起. 方便复用

示例

复制代码 
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <script src="../node_modules/vue/dist/vue.global.js"></script>  </head>  <body>    <div id="app">      <!-- 文章一 -->      <div class="blog-item">        <h3>{{title}}</h3>        <div>{{content}}</div>      </div>
      <!-- 文章二 -->      <div class="blog-item">        <h3>{{title}}</h3>        <div>{{content}}</div>      </div>
      <!-- 文章三 -->      <div class="blog-item">        <h3>{{title}}</h3>        <div>{{content}}</div>      </div>    </div>
    <script>      const { createApp } = Vue
      const vm = createApp({        data() {          return {            title: '文章标题',            content: '文章内容',          }        },      }).mount('#app')</script>  </body></html>

如果要使用组件需要先注册. 从注册的方式不同

可以将组件分为

  • 全局组件

  • 局部组件

3) 全局组件

顾名思义, 全局都可以使用的组件, 组件在当前 Vue 应用中全局可用

语法​​​​​​​

复制代码 
// 可以使用 Vue 应用实例的 app.component() 方法
import { createApp } from 'vue'
const app = createApp({})
app.component(  // 注册的名字  'MyComponent',  // 组件的配置对象  {    /* ... */  })

组件对象中的配置项和createApp中的配置项一致

什么是当前Vue应用

每次调用createApp会创建一个新的Vue应用. 不同的Vue应用实例有自己的空间. 不能跨应用引用组件​​​​​​​

复制代码 
const app = createApp({}) // 创建一个应用实例const app1 = createApp({}) // 创建一个新的应用实例
console.log(app === app1) //false// 在app中注册的组件, 不能在app1中使用

🤔为什么data是一个函数？

每个实例可以维护一份被返回对象的独立的拷贝：​​​​​​​

复制代码 
data: function () {  return {    count: 0  }}

如果 Vue 没有这条规则，点击一个按钮就会影响到其它所有实例！

示例​​​​​​​

复制代码 
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  <script src="../node_modules/vue/dist/vue.global.js"></script><body>  <div id="app">    <counter></counter>    <counter></counter>    <counter></counter>  </div>  <script>    const {createApp} = Vue    const app = createApp({})
    // 定义组件    app.component('counter', {      template: '<button @click="count++">点击了{{count}}次</button>',      data() {        return {          count: 0        }      }    })    app.mount('#app')</script></body></html>

引用

在模板中, 通过组件名称引用组件

复制代码 
<blog-item></blog-item>

注意事项

  1. 命名原则

  2. 闭合方式

  3. 引用位置

    Document