这章我们将要来学习什么是vue组件，以及Vue.js组件中的全局组件和局部组件，局部组件，和自定义事件。
一．什么是组件？
Vue.js组件是Vue.js 最强大的功能之一。Vue.js组件可以扩展HTML元素，什么意思呢？就是为html新增标签，就像html5那样加入了全新的结构型元素，例如页眉header，页脚footer，导航nav，内容article，章节section等。而Vue.js组件扩展HTML的元素是你为该项目注册的。此外Vue.js可以封装可重用的代码，在需要的之后只需要直接引入就可以。来看看注册Vue.js组件。
二．Vue.js组件中的全局组件和局部组件
就像javascript定义变量，Vue.js组件注册也有区分全局和局部组件。
1、全局组件
全部组件就是可以在任意Vue.js示例下使用的，在Vue.js中调用Vue.js.component()注册的组件是全局的。 注册一个全局组件语法格式如下：
Vue.js.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
例如：把id=template1中的模版插入到已经注册的goodnight组件中。
<div id="app">
<goodnight></goodnight>
<goodnight></goodnight>
<goodnight></goodnight>
</div>
<template id="template1">
<div>
<h3>goodnight</h3>
<button id="btn">Submit</button>
</div>
</template>
</body>
<script>
// 注册
Vue.component('goodnight', {
template: '#template1'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
2、局部组件
如果在实际项目中不需要全局注册，或者是想让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。
例如：模版只能在goodnight里面用，在good组件是用不了的。
<div id="app">
<goodnight></goodnight>
<goodnight></goodnight>
<good></good>
</div>
<template id="template1">
<div>
<h3>goodnight</h3>
<button id="btn">Submit</button>
</div>
</template>
</body>
<script>
var template1 = {
template: '#template1'
}
// 注册
// 创建根实例
new Vue({
el: '#app',
components:{
'goodnight': template1,
}
})
</script>
另外，Vue.extend 是构造一个组件的构造器。充分说明了Vue.js的组件使用规则和原理，设置模板，向模板填充数据并渲染。 用于Vue.js组件的局部注册。简单的理解为Vue.extend创建的组件会自动添加到自定义的元素上。
用法：Vue.extend ( options )，options 是对象；
例如：
<div id="extend1"></div>
var extend1=Vue.extend({
template:'<h1></h1>',
data(){
return {
myname:'vue.js局部组件使用'
}
}
})
var extend2=new extend1();
extend2.$mount('#extend1')
三．自定义属性prop
组件实例之间的作用于是独立的，相互之间不能进行数据的传递，那如果一个子组件需要应用父组件的数据，应该如何来进行数据传递呢？在Vue.js中，可以通过设置父组件的属性prop，自定义地把数据传递给子组件。
例如：
<div id="app">
<my-component message="hello" name="vue.js" age="18"></my-component>
</div>
</body>
<script>
Vue component('my-component', {
// 声明 props
props: ['message','name','age'],
data:function(){
return {
message1:this.message,
name1:this.name,
age1:this.age
}
},
template: '<span>大家好，我是,今年</span>'
})
// 注册
// 创建根实例
new Vue({
el: '#app',
})
</script>
其实props是收取父组件的数据，并且可以通过实例创建子组件的方式传递给子组件并渲染模版。prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态而发生数据错误。
四．自定义事件
那在实际项目中，是需要把子组件要把数据传递回去给父组件，那怎么办？不是说props是单向绑定的吗？这时候，就不用prop 了，子组件要把数据传递给父级 依靠自定义事件。 $on(eventName) 监听事件
和 $emit(eventName) 触发事件
例如：
<div id="app">
<button @click="add"></button>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
night:"晚上好"
},
methods:{
add:function(){
this.$emit('text','我睡了');
}
}
});
app.$on('text',function(value){
console.log(value);
})
</script>
以上是Vue.js强大的组件教程，结合实例大家更加容易理解和快速上手使用。 关于组件更加深入的了解请移步到：深入了解vue组件——从注册到使用