VUE组件注册

一、注册组件

1.Vue.component全局注册

//全局注册组件
Vue.component('component-a', { /* 模板内容 */ })
Vue.component('component-b', { /*模板内容 */ })
Vue.component('component-c', { /*模板内容 */ })

//创建vue跟实例
new Vue({ el: '#app' })

//调用组件
<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

　　2.局部注册

//申明变量并将模板内容赋值给变量
var ComponentA = { /* 模板内容 */ }
var ComponentB = { /*模板内容 */ }
var ComponentC = { /* 模板内容 */ }

//创建VUE根实例，注册组件并给组件赋值
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

　　在vue-cli构建项目中注册方法如下：

//引入组件
import ComponentA from './ComponentA.vue'
//抛出组件
export default {
  components: {
    ComponentA
  },
  // ...
}