介绍

组件：一段独立的，能代表页面某一个部分的代码片段，拥有自己独立的数据、JavaScript脚本、 以及CSS样式。

组件是可复用的Vue实例，在开发过程中可以把经常重复的功能，封装为组件，达到快捷开发的 目的。

组件的好处：

  • 提高开发效率

  • 方便重复使用

  • 易于管理和维护

通常一个应用会以一棵嵌套的组件树的形式来组织，如图所 示。

例如，你可能会有页头、侧边栏、内容区等组件，每个组件 又包含了其它的像导航链接、博文之类的组件。

文件格式

Vue单文件组件（又名*.vue文件，缩写为SFC）是一种特殊的文件格式，它允许讲Vue组件的模板、逻辑与样式封装在单个文件中。

正如所见，Vue SFC 是经典的HTML、CSS 与JavaScript 三个经典组合的自然延伸。每个*.vue 文件由三种类型的顶层代码块组成：<template>、<script> 与 <style>：

- <template> 部分定义了组件的模板。

- <script> 部分是一个标准的JavaScript 模块。它应该导出一个Vue 组件定义作为其默认导出。

- <style> 部分定义了与此组件关联的CSS。

使用

使用具体流程：

1、在src/components目录里开发一个组件文件（首字母大写）

2、在父组件里引用子组件import xxx from‘xxx’

3、在默认导出里注册组件

4、在template模板里使用组件

注册

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类 型：全局注册和局部注册。上述是局部注册，只能在当前模板中使用。

  • 全局注册：声明一次，在任何vue文件模板中使用，一般使用该组件的地方多时使用

  • 局部注册：在使用组件的vue文件中声明和使用，一般只需要解耦代码时使用

全局注册：在main.js文件

全局注册后，在任意.vue文件里可使用该组件： views/Home.vue

传参

学习了组件用法，就像一种嵌套引用关系，在这个关系中，经常会涉及相互传数据的需 求，即父组件传子组件，子组件传父组件。

父、子组件的关系可以总结为：prop 向下传递，事件向上传递。

父组件通过prop 给子组件下发数据，子组件通过事件给父组件发送消息，如右图所示：

父传子：在默认页面中，也用到了父传子，在父组件Home.vue中给引用 的组件传入一个静态的值，子组件通过props属性接收，并在模板中使用。

也可以通过v-bind或者简写：动态赋值，例如：

子传父：