什么是组件？存在的意义
组件 (Component) 这个概念，在 Vue 中可以说是举足轻重的。组件用于写一个页面，或者集中相同界面或功能。
可以理解成可以重复使用的 html 片段（但是功能更丰富），或者一个页面。
注: 在此，仅描述 .vue 单文件组件
组件的结构
组件一般包含以下几部分
- 模板声明
- 组件声明
- 样式
<template>
// 你的html写在这里
/<template>
<style><br> // 你的组件内样式写在这里<br>/<style>
模板是一种与 html 相同的写法的片段，用于描述文档结构。
<template>
内容
/<template>
模板必需使用 template 标签为根，并且根只能拥有一个直接子元素（不限标签类型），比如:
<template>
内容1
内容2
/<template>
这样的写法是有问题的。
模板中可以使用所有的 html 标签，也可以引用其它的组件:
<template>
<custom-component>
/<template>
标签上也可以如原生的 html 一样，写属性，事件，样式，类等。
<template>
内容
/<template>
组件的声明是通过 js 实现的，需要注意的是，在 Vue 中，默认使用了 ES6 的语法，特别是其模块的导入导出。
ES6 模块的导入导出
将函数作为模块导出
haha.js
function haha() {
console.log('message from haha')
}
function hehe() {
console.log('message from haha')
}
export default haha
export { hehe }这里使用了两种导出方式，一个默认的导出 haha，另一个具名(没有研究过到底叫啥名，自己编的名字)的导出 hehe
在其它位置导入此模块
hehe.js
import haha from './relativePath/to/haha.js'
import { hehe } from './relativePath/to/haha.js'
haha() // 输出: message from haha
hehe() // 输出: message from hehe
注意，两种导出方式对应的导入也是不同的
Vue 的组件声明，就使用了默认导出的方式 export default {}。
export default {
name: '组件名称',
// 声明此组件的属性（由父组件调用时传入），可以理解为函数的参数
props: {
// 属性名称
propName: {
// 属性的类型，多个类型时，使用数组: [String, Number]
type: String,
default: '默认值',
// 属性是否是必需的
required: false
}
// 更多的属性
},
// 引用的组件集合
components: {},
// 混入列表 [1]
mixins: [],
// 过滤器，提供给组件模板使用的管道过滤器，用于对数据的简单处理 [2]
filters: {},
// 拥有的数据，数据始终应该使用 return {} 的方式提供，以避免组件复用导致数据被共享
data() {
return {
data1: 1
}
},
// 方法集合，这些方法可以在组件内通过 this 访问，也能在模板内直接访问
methods: {},
// 组件的计算属性 [3]
computed: {
// 一个示例，用于计算 data1 的平方
hehe() {
return this.data1 ** 2
}
},
// 监视数据变化的集合，当指定的数据变化时，此处的方法会被调用
watch: {
// 监视数据 data1，在此方法内，可以实现在 data1 变化时执行代码
data1(newValue) {}
},
// 生命周期钩子: 组件创建后调用，此时组件还没挂载到 DOM 树上
created() {},
// 生命周期钩子: 组件挂载到 DOM 树上后调用，一般在这里面执行一些初始化代码
mounted() {},
// 生命周期钩子: 组件更新后调用，要注意的是，不能在这个组件内执行会更新组件的操作，否则可能会出现死循环 [4]
updated() {},
// 生命周期钩子: 组件销毁前调用，这里一般执行一些回收操作，如：数据重置，移除事件绑定，取消 setTimeout 或 setInterval 等
beforeDestroy() {}
}[1] 混入为 Vue 中组件重用的一种方式，旨在多个组件中共用相同的声明，类似面向对象中的接口或虚类
[2] 过滤器类似数据格式化函数，在使用时，类似 linux shell 中的管道用法
[3] 计算属性用于执行自动计算，当其中使用到的数变量发生变化时，会自动重新计算其值。在使用计算属性时，需要当作一个属性，而不是一个函数，如: this.hehe 而不是 this.hehe()。计算属性应该始终返回一个值
[4] 也不是绝对不可以执行更新代码，但是必须要有条件判断，以终止执行
这里并没有把全部结构都列出来，若有需要请移步官方文档
在模板中使用数据与逻辑
<template>
- {{item}}
点击后隐藏这个元素
/<template>
解释一下上面的代码吧
- v-for 这是用来搞循环的，可以遍历 data 中的每一项 item
- :key 这是 Vue 中对循环的约束，要求循环必须设置一个唯一的 key 值。另外，这个写法是 v-bind:key 的简写，表示给属性 key 绑定变量 item。所有的属性（组件属性，以及 html 属性均可使用此写法），如：
- {{item}} 这是模板取值的表达式，此时 item 的值会被填充到 li 元素中
- v-show 控制元素的显示/隐藏（通过设置样式 display 实现）；另一种相似的写法为v-if，不同之处在于，v-if 为 false 时是将元素从 DOM 树移除，而 v-show 为 false 时是设置 display: none
- @click="onClick" 为元素绑定点击事件 onClick，这是 v-on:click的简写，所有事件都能使用这样的方式来简写，比如: @mouseover, @keydown，自定义事件也如此
- 在 onClick 方法中，有这么一句 this.visible = false ，这里的 this 表示的是当前的组件实例，可以通过 this 访问组件的所有数据
样式
组件内样式 (含作用域)，仅对当前组件生效
<style><br> div {<br> color: red;<br> }<br>/<style>这个样式将组件内的所有 div 的文字设置为 red
全局样式，对项目内所有元素生效
这个样式将项目内的所有 div 的文字设置为 red
也还支持导入外部样式
预编译的Less/Sass也是支持的
<style><br> div {<br> color: red;<br> > span {<br> color: black;<br> }<br> }<br>/<style>接下来的扫雷项目就会使用 less 编写样式。
组件的引用
首先，有这么一个组件 Sample.vue
<template>
{{textContent}}
/<template>
此组件的声明中，包含一个名叫 textContent 的属性，通过另一个组件去引用组件 Sample.vue （引用时可以通过属性指定 textContent 的值）
<template>
<sample-component>
/<template>
注意: 在命名组件时，一般使用 帕斯卡命名法(Pascal) ，在引入组件时，可以保留原组件名称，也可以指定新的名称，如：
export default {
component: {
// 保留原名称
Sample: Sample,
// 指定新名称
SampleComponent: Sample
}
}按 W3C 标准，组件标签应该始终为小写，多个词时使用短横线 - 分隔(同样地，此规则也适用于属性名称)，如：
<template>
<sample>
<sample-component>
/<template>
全局引用
如果一个组件需要大范围地使用，那么像前面这样每次都引用就是一个笨办法了。Vue 提供了全局的组件注册
import Vue from 'vue'
import Sample from './components/Sample.vue'
Vue.component(Sample.name, Sample)
这样就能在项目的任意组件内使用 sample 组件了
这些代码一般会写在 main.js 中
本节完
閱讀更多 前端小李 的文章
