1、注册组件javascript
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.局部注册vue
//申明变量并将模板内容赋值给变量 var ComponentA = { /* 模板内容 */ } var ComponentB = { /*模板内容 */ } var ComponentC = { /* 模板内容 */ } //建立VUE根实例,注册组件并给组件赋值 new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB } })
在vue-cli构建项目中注册方法以下:java
//引入组件 import ComponentA from './ComponentA.vue' //抛出组件 export default { components: { ComponentA }, // ... }