vue入门8：组件的使用

一、 组件的作用

组件可以对代码进行封装，避免重复造轮子

二、组件注册

1.全局注册

Vue.component('my-component-name', {
  // ... 选项 ...
})

2.局部注册

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

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,//使用局部组件一定要在vue实例这里注册
    'component-b': ComponentB
  }
})

三、组件使用

注册好后我们就可以引用组件了

<div id="app">
   <my-component-name></my-component-name>
   <component-a></component-a>
   <component-b></component-b>
  </div>