一、注册组件
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
},
// ...
}