概念

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

!!! 熟记 : 页面中可复用的结构、样式和功能，抽离成一个文件;

特点: 为了便于 组织和管理代码 , 便于维护和扩展维护

组件化和模块化的不同:

模块化:是从代码逻辑的角度进行划分的;方便代码分层开发，保证每个功能模块的职能单一 组件化:是从UI界面的角度进行划分的前端的组件化方便组件的重用;

全局组件

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。

1. 注册

Vue.component('MyDemo'{
template:`<div>这个的全局组件的注册</div>`
})

2.实例化 Vue

var vm = new Vue({
el:'#app',
})

3. 使用组件

<div id="app">
<my-demo></my-demo>
</div>

!!!注意事项：

必须先注册才能使用。而且注册要写在实例之前。否则也不能生效。 组件名称不可以使用浏览器支持的标签。如：div,article……

局部组件

通过Vue.component()的方式注册组件，称之为全局注册，即在实例的任何地方都可以使用。

那么全局组件也会带来问题，比如将来我们在项目中注册过全局组件，但是我们后面不再使用它。那么会导致这个无用的全局组件也会被打包到项目中。我们可以通过局部注册的方式来解决这个问题，即需要的时候再来注册组件。

局部组件的注册方式

1.通过普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }

var ComponentB = { /* ... */ }

var ComponentC = { /* ... */ }

2.在 components 选项中注册你想要使用的组件：

new Vue({
  el: '#app',
  components: {
    ComponentA,
    ComponentB
  }
})

3.使用注意注册在哪里，那么这个组件就只能这里使用

<component-a></component-a>
<component-b></component-b>

注意

这里我们没有将ComponentC注册，那么这里面是不可以使用的。局部组件必须先注册，再使用。否则会报错