组件

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

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

举例

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

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

组件分为

全局组件
局部组件

# 1 全局组件

顾名思义, 全局都可以使用的组件

# 1) 完成 Vue 三步曲

在 src 目录下创建09_全局组件.html, 编写基础的 vue 模板

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>09_全局组件</title>
    <!-- 1. 引入vue.js -->
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 2. 编写div元素 -->
    <div id="app"></div>
    <!-- 3. 编写vue实例 -->
    <script>
      const vm = new Vue({
        el: '#app',
      })
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 2) 定义全局组件

语法

Vue.component('组件名', { 组件参数 })

示例

Vue.component('com1', {
  template: '<button @click="count++">你点了我{{count}}次</button>',
  data() {
    return {
      count: 0,
    }
  },
})

1
2
3
4
5
6
7
8

组件没有 el 参数, 原因是组件不会和具体的页面元素绑定
组件必须有 template 参数, 原因是组件需要渲染页面, template 就是需要渲染的 html
组件也是一个 Vue 的实例, 所以在组件中也有 data/methods 等
data 必须是一个函数, 并返回一个对象

# 3) 引用组件

在 html 中, 通过组件名引用组件

<!-- 2. 编写div元素 -->
<div id="app">
  <!-- 引用组件 -->
  <com1></com1>
  <com1></com1>
  <com1></com1>
</div>

1
2
3
4
5
6
7

我们发现每个组件互不干扰，都有自己的 count 值。怎么实现的？

重点

组件中的 data 属性必须是函数！

当我们定义这个 <com1> 组件时，它的 data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

1
2
3

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

1
2
3
4
5

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

# 4) 全局使用

创建一个新的 vue 实例 vm2

const vm2 = new Vue({
  el: '#app2',
})

1
2
3

创建新的 div 元素 app2

html

<div id="app2">
  <com1></com1>
</div>

1
2
3

发现在 app2 中, 也可以引用 com1 组件, 这样定义的就是全局组件, 所有的 vm 实例都可以引用

# 5) 小结

全局组件的使用步骤

定义组件
引用组件

# 2 局部组件

一般在单页面应用(SPA)中使用较多的是局部组件

注意

局部组件只属于某一个 Vue 实例, 通过 comopnents 添加(挂载)

通常将组件参数单独定义, 方便工程化时管理
通常将组件模板单独定义, 方便工程化时管理

# 1) 完成 Vue 三步曲

在 src 目录下创建10_局部组件.html, 编写基础的 vue 模板

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>10_局部组件</title>
    <!-- 1. 引入vue.js -->
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 2. 编写div元素 -->
    <div id="app"></div>
    <!-- 3. 编写vue实例 -->
    <script>
      const vm = new Vue({
        el: '#app',
      })
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 2) 定义局部组件

模板部分

<!-- 组件模板 -->
<template id="tmp">
  <button @click="count++">
    你点了我{{count}}次
  </button>
</template>

1
2
3
4
5
6

js 部分

// 定义组件对象
const com1 = {
  template: '#tmp', // 定义组件模板
  data() {
    // 定义属性
    return {
      count: 0,
    }
  },
}

1
2
3
4
5
6
7
8
9
10

# 3) 挂载组件

在 vue 实例中挂载组件

const vm = new Vue({
  el: '#app',
  components: {
    // 组件名: 组件对象
    son: com1,
  },
})

1
2
3
4
5
6
7

在 vue 实例中, 通过components完成挂载

# 4) 引用组件

在 html 中, 通过组件名引用组件

<!-- 2. 编写div元素 -->
<div id="app">
  <!-- 引用组件 -->
  <son></son>
</div>

1
2
3
4
5

# 5) 小结

局部组件的使用步骤

定义组件模板
定义组件对象
在 vue 实例中挂载组件
引用组件

如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~

#vue2

上次更新: 2021/09/03, 15:32:17

← 计算属性与侦听器组件通信→