# SFC 单文件组件

Vue 允许将 UI 划分为多个独立的、可复用的部分，只需要在内部封装实现自己的逻辑，这些可复用的部分被称为组件。

与 HTML 类似，Vue 组件可以实现嵌套，在父组件下安放子组件，可以在 Vue 官方的调试工具 vue-devtool 中查看 Vue 组件的树状结构图（Vue 组件树）。

# 结构

通过 .vue 文件构建一个 Vue 单文件组件(SFC) 。

.vue 文件通常包含三部分，模板template、脚本script以及样式style。结构如下：

<template>
	<div class='root'></div>
</template>

<script>
export default {}
</script>

<style scoped>
</style>

1
2
3
4
5
6
7
8
9
10

# template

.vue 文件在 template 中可以书写类似于 HTML 标签来构建 Vue 组件的页面结构，又与 HTML 不同的是，template 为用户提供了 Vue.js 相关的 API 可以在标签上直接使用，比如 v-on、v-bind、插值表达式等等。

Vue 2 以后， template 只能有一个根节点，当下面存在多个不确定的根节点会直接报错。

# script

script 标签下用来书写组件的代码逻辑，同时对外暴露这个组件选项对象。

默认导出的对象有多个常用的属性及方法： data方法用来维护整个组件的数据，至于为什么是方法而不是属性？因为提高组件的复用性，每个新的组件实例不能共用一套数据，所以 data 方法里面返回一个新的含有数据的对象，以保证每次创建新的组件实例时它的数据只在自己这个组件内生效。

name属性显式声明组件的名称，在Vue组件树中展示，有利于开发者代码的调试，同时允许组件在自己的模板中调用自己。

method属性是一个包含组件里所有和函数和方法有关的对象，最后这些方法会混入到组件实例上，可以通过组件实例直接访问到。声明方法时要避免使用箭头函数，因为箭头函数无法传递this的指向，也无法通过this访问组件实例。

watch监听属性用来监听组件里某些数据的变化，在变化时执行回调函数。

computed同样可以监听数据的变化，并返回一个只读计算属性。

components对象用于注册对当前实例可用的组件，也就是用于注册当前组件的子组件。

props属性用于接收父组件传递的自定义属性信息，用于组件通信。

各种各样的生命周期函数，在 Vue 组件实例的不同时期触发，关于生命周期的笔记可以看上一节03-生命周期。

# style

style 标签下存着所有与组件相关的样式，使用scoped属性则样式只对本组件生效（会为样式加上一个不重复的标记来保证唯一），如果没有scoped会引起样式污染。与template和script不同的是，在同一个 .vue 文件下，可以存在多个 style 标签。如果想使用 css 预处理器，可以使用 lang 属性，但同时需要在 webpack 中配置对应的 loader，Vue Loader通过 lang 来判断要使用的预处理器。

<style scoped lang='scss'>
	:root {}
</style>

1
2
3

# 使用

组件声明完毕后，需要在父组件中导入组件暴露的对象，然后 components 选项上注册。注册时的名字也将作为组件名：

<script>
export default {
	components: {
		camelCase: camelCase,
		// ES6 语法中属性名与变量名相同只写一个即可
		kebabCase,
	}
}
</script>

1
2
3
4
5
6
7
8
9

注册后，建议将驼峰命名法改为短横线连法，以标签的形式在模板中使用：

<template>
	<div>
		<kebab-case></kebab-case>
	</div>
</template>

1
2
3
4
5

# 全局组件

全局组件是 Vue 项目下所有实例文件都能直接使用的组件，在 main.js 文件中导入并注册。

# 局部组件

私有的组件可以在实例中的components选项注册，也就是局部组件，这样局部组件就可以只在当前实例下工作。

← 03-生命周期 Fast Q&A →