vue入门篇（八）：组件详解

一、前言

由于组件的出现，我们的系统被构建成一块一块的组件，它们实现各自特定的功能，而且具有复用性，解决了传统开发高耦合的痛点。有了组件我们的系统可以被构建成这样（官网的图）：

以后维护起来只需要在对应的组件修改代码即可，不会影响其他部分，而且配合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"