首先我们来看看 vue.js官网对于组件的描述
那么组件到底是一个什么东西呢,用一句简短的话来描述：
组件就是可以扩展HTML元素，封装可重用的HTML代码，可以将组件看作自定义的HTML元素。
看到这里你可能会觉得比较抽象
那么我们来写几个例子来学习一下vue.js的组件
一、组件的创建与祖册
一个组件能够使用一定通过了三个步骤
1.创建组件
创建组件的概念即在Vue构造函数中通过extend()方法添加该组件（ps：你可以理解在开学第一天的时候，老师不认识你，但是知道有张三这个人）
2.注册组件
注册组件的概念即在Vue够着函数中通过一个属性名与之管理在一起，有点像var temp=1;这个时候 temp就是1了（ps：这个时候老师把你跟花名册上的人对应起来了）
3.使用组件
使用组件这个时候你就可在dom中添加你创建的组件名（ps：这个时候你终于可以以你的名义去干点什么了比如上课，看书啥的）
*这里是有一个前提条件的
你使用组件名的时候是需要先实例化Vue的，因为你的组件现在是扩展在Vue中，你要想使用Vue中的组件你就需要先实例化获得这个组件才能够使用 二、全局注册于局部注册 全局注册跟局部注册的区别就在于这个注册的地方不一致 全局注册就是只要是实例化Vue的范围都可以使用该组件 局部注册就是只能在某一个Vue实例的范围内使用该组件 如果你看到这里还不能理解下面我会写一个小例子给你 全局注册：var global_conponent=Vue.extend({
template:"<h1>我是一个全局组件</h1>"//创建组件
})
Vue.component("my-global-component",global
_conponent)// 注册的全局组件
以上就是创建组件以及全局注册的示例局部注册：var tempComponent=Vue.extend({ template:"<h1>我是一个全局组件</h1>" //创建组件 })
new Vue({
el:"#app3",
data:{},
methods:{},
components:{
'temp-compoent':tempComponent
}
})以上就是创建组件以及局部注册的示例
三、父子组件的创建以及注册var Children=Vue.extend({
template:"<h2>Children</h2>"
})
var Parent=Vue.extend({
template:"<h2>Parent<child></child></h2>",
components:{
"child":Children
}
})
Vue.component("parent",Parent)
new Vue({
el:"#div1",
data:{},
methods:{}
})该代码为全局注册的父子组件
new Vue({
el:"#div1",
data:{},
methods:{},
components:{
'item':{
template:"<h2>Parent<child></child></h2>",
components:{
"child":{
template:"<h2>Children</h2>"
}
}
}
}
})
这段代码是局部注册的嵌套父子组件，是不是感觉剪短了不少
再来一段父子组件的数据通信
<div id="myDiv">
<parent :mymsg="msg"></parent>
</div>
new Vue({
el:"#myDiv",
data:{
"msg":"传值数据"
},
components:{
'parent':{
data:function(){
return {"mydata":123}
},
props:['mymsg'],
template:"<h1>局部父组件{{mydata}}{{mymsg}}<child :childmsg='mymsg'></child></h1>",
components:{
'child':{
props:['childmsg'],
template:"<h3>局部子组件{{childmsg}}</h3>"
}
}
}
}
})
这样就可以达到父子通信的目的（ps：你可以理解为props[xxx] 把钱拿过来了，用:xxx="父级数据" 放在你口袋里了 最后{{xxx}}显示出来）