一、前言
由于组件的出现,我们的系统被构建成一块一块的组件,它们实现各自特定的功能,而且具有复用性,解决了传统开发高耦合的痛点。有了组件我们的系统可以被构建成这样(官网的图):
以后维护起来只需要在对应的组件修改代码即可,不会影响其他部分,而且配合ES6中的模块化使得我们项目变得更加容易维护。除此之外,组件化是Vue的核心,所以可见它是多么地重要了。下面我将详细介绍如何使用组件。
二、组件注册
组件有两种注册方式,一种是局部注册,另一种是全局注册。而在讲解组件注册之前,我想先说一下组件的命名规范,因为命名规范可以提高代码的可读性。
2.1 组件命名规范
- 单文件组件(.vue)最好使用
MyComponent.vue
这种PascalCase
风格。当然使用横线连接 (kebab-case)的风格也是可以的,只不过你必须统一使用一种风格,个人还是推荐前者。 - 基础组件(只有展示样式、无逻辑、无状态)使用
Base
、App
、V
开头,如BaseButton.vue
。 - 单例组件(每个页面只能使用一次,而且不接收prop)使用
The
开头,如TheSidebar.vue
。 - 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。如:
TodoList.vue、TodoListItem.vue、TodoListItemButton.vue
。 - 在单文件组件(.vue)、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
- 在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。
- 以
Vue.component
(下面会讲解)这种方式注册的组件有两种风格kebab-case
和PascalCase
,区别在于在Dom模板中只能识别前者,而后者只能在单文件、字符串模板、JSX中使用
更多规范请看文档:风格指南
2.2 全局注册
我们先看看全局注册的组件怎么定义
Vue.component("my-component", {
//组件属性
});
比如我有一个 todo-item
的组件,来实现一个todolist
的功能:
//注册一个列表组件,名为todo-item,也可以是TodoItem
Vue.component("todo-item", {
//通过props接收父组件的数据
props: ["content"],
template: "<li>{
{content}}</li>"
});
const app = new Vue({
el: "#app",
data: {
inputValue: "",
list: []
},
methods: {
handleBtnClick() {
if (this.inputValue != "") {
this.list.push(this.inputValue);
this.inputValue = "";
}
}
}
});
<div id="app"