vue 组件：全局注册和局部注册

全局组件:  如果想组件在任何地方都能应用，我们就需要注册全局组件
局部组件:  局部组件要挂载到实例元素（在实例中定义组件）上，否则没有效果

全局注册方式:
//注册
Vue.component('component-a',{
	template:'
我是全局注册的组件aaa
'})

new Vue({ el: '#app' })

//全局使用。

  




局部注册方式：
//注册
var aComp={}

//在实例中定义
var app=new Vue({
	el:'#app',
	components:{
		a-Comp:'aComp'
		}
	})

//在挂载的实例元素上使用。（上面挂载了“app”这个元素）

  

---

 全局注册：

全局注册的组件，Vue 根实例 (new Vue) 的中使用。缺点：注册了的全局组件，就算不需要用到，仍会占用内存在注册之后可以用可以在任何新创建的

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

PS: 组件注册必须要放在实例前面完成！！

       否则会出现报错：组件未声明 （Unknown custom element: - did you register the component correctly?）

正确格式例子：

 

---

局部注册：

两种方式：

1.单独声明组件。用js  对象注册组件

2.直接在实例中components注册

第一种、通过一个普通的 JavaScript 对象来注册组件，然后在实例中定义

var ComponentA = {
    template:`
注册一个组件aaaa
`    
}

var ComponentB = {emplate:`
注册一个组件bbb
`     }
var ComponentC = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'com-A': ComponentA,
    'com-B': ComponentB
  }
})

在挂载的元素中使用组件

第二种、直接在实例中 components 属性中注册：然后在挂载的根元素中使用

new Vue({
  el: '#ling',
  components: {
    'component-A': {
        
我是局部注册的组件
}
  }
})

注意：局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

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

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

或者；如果你通过 Babel 和 webpack 使用 ES2015 模块（import 和 export default），应该这样写：

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

注意：在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

• 用在模板中的自定义元素的名称
• 包含了这个组件选项的变量名

---

**在模块系统中局部注册 （webpack）

使用了诸如 Babel 和 webpack 的模块系统

创建一个 components 目录，并将每个组件放置在其各自的文件中。

然后你需要在局部注册之前，在 main.js 文件导入每个你想使用的组件。

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}