【Vue】Vue组件简单使用

现在的有些web应用都非常庞大，web开发也越来越组件化、模块化，我们需要在使用vue的时候去写一些组件，避免重复造轮子，提高组件的复用和开发效率。

1.什么是组件？

一个组件就好像一块积木，多个组件的层层堆叠、摆放最终形成一个完整的系统。组件的好处在于降低了各个模块之间的耦合性，以至于我们在维护项目时不会太心累。高度耦合的项目必然会带来维护时间上的浪费。在目前的前端开发中，组件化发开是必须要掌握的技能，我们也需要学会如何去封装一个组件。

2.Vue组件的使用

vue中组件分为全局注册和局部注册，全局注册的组件可以在每个vue实例中使用。

全局注册
Vue.component('my-component-name', {
  // ... 选项 ...
})

//在模板里使用
<div id="app">
  <my-component-name></my-component-name>
  <my-component-name></my-component-name>
  <my-component-name></my-component-name>
</div>

局部注册
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

//在需要的vue实例中使用组件
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

注:组件命名还可以使用峰驼命名（如：MyCompontent），个人喜欢短横线命名（如：my-component）,这跟我们在模板中使用的方式是一致的。