Logo

# Vue2教程 - 14 组件

什么是组件？

前面在进行学习的时候，已经使用了组件，在 App.vue 组件中完成的，但是在项目中只使用了这一个组件，作为整个项目的根组件。

在正常的项目中，是将 App 作为根组件的，然后在 App 中通过路由（后面学习）来控制页面的切换，实际控制的是组件的切换；页面中展示的内容，也是封装成一个个组件，利于功能的划分和代码的复用。最终构成整个前端的 SPA(Single Page Application) 单页面应用。

下面来正式学习一下组件的使用。

# 14.1 创建组件

现在我们来创建一个组件，然后在 App.vue 根组件中引入并使用这个组件。

# 1 创建组件

在 src 目录下创建一个 components目录，然后在 components 目录下创建一个 HomePage.vue 文件，后缀名为 .vue。

在 HomePage.vue 文件中输入如下内容：

<!-- 1.组件模板 -->
<template>
    <div>
        <h1>HomePage组件</h1>
    </div>
</template>

<!-- 2.组件业务逻辑 -->
<script>
export default {
    name: "HomePage"    //可以省略
}
</script>

<!-- 3.编写组件样式，scoped表示样式只对当前组件生效 -->
<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

组件分为三个部分，在 HelloWorld 中已经讲解过了。

# 2 引入和使用组件

现在在 App.vue 页面引入上面创建的组件，使用 import 进行引入：

<template>
  <div id="root">
    <!-- 使3.用组件 -->
    <HomePage />
  </div>
</template>

<script>
// 1.引入HomePage
import HomePage from '@/components/HomePage.vue';

export default {
  name: 'App',
  components: {
    HomePage  // 2.声明使用组件
  }
}  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  • 首先使用 import 引入组件，路径中的 @ 表示 src 目录；
  • 在 App 组件的 components 属性中声明使用组件，如果有多个，用 , 分隔；
  • 然后就可以使用组件了： <HomePage></HomePage> 。

# 3 组件中的data

前面也已经介绍了，可以在 组件中定义 data、methods、filters、computed 等等。

关于组件的 data 有几点说明：

  1. 组件的 data 和 Vue 实例的 data 有点不一样，Vue 实例中的 data 可以为一个对象，但是组件中的 data 必须是一个方法；
  2. 组件中的 data 除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行;
  3. 组件中的 data 数据，使用方式和Vue实例中的 data 使用方式完全一样，使用 this. 就可以直接访问 data 中的数据。

为什么组件中的数据必须返回一个函数？

如果data不是一个函数，而是一个对象，那么这个对象会在所有组件实例之间共享，导致一个实例对数据的更改会影响到其他实例。通过返回一个函数，每个组件实例都可以调用这个函数来获取自己的数据副本，从而保持数据的独立性。

# 14.2 父组件向子组件传值

在子组件中无法访问父组件中定义的数据和方法。

那么父子组件如何进行数据传递呢？

内容未完......
查看完整内容 →

← 15-插槽 →