组件可以扩展HTML元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
注册一个全局组件语法格式如下：
Vue.component(tagName,options); tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>全局组件
所有实例都能用全局组件。
<div id="app">
<runoob></runoob>
</div>
<script>
// 注册
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>局部组件
在实例中注册局部组件，这样组件只能在这个实例中使用。
<div id="app">
<runoob></runoob>
</div>
<script>
var Child = {
template: '<h1>自定义组件!</h1>'
}
// 创建根实例
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': Child
}
})
</script>Prop
prop是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件，子组件需要显式的用props选项声明prop：
<div id="app">
<child message="hello!"></child>
</div>
<script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>传递多个数据：
<body>
<div id="app">
<ol>
<my-component message="来自星星的你" world="郝大叔"></my-component>
</ol>
<script src="js/vue.min.js"></script>
<script>
Vue.component('my-component',{
props:['message','world'],
template:'<div>{{ message}},{{world}}</div>'
})
var app = new Vue({
el:'#app'
})
</script>
</body>数据验证
注意：开发者版本有效
<body>
<div id="app">
<input type="text" name="" id="" value="" v-model="val" />
<ol>
<my-component :data="val"></my-component>
</ol>
<script src="js/vue.min.js"></script>
<script>
Vue.component('my-component',{
props:{
'data':{
type:[Number],
required:true
}
},
template:'<div>{{ data}}</div>'
})
var app = new Vue({
el:'#app',
data:{
val:0
}
})
</script>
</body>