vue組件：組件主要是擴(kuò)展了HTML元素，使dom元素更加靈活，慢慢深入會(huì)發(fā)現(xiàn)組件是vue構(gòu)建項(xiàng)目所必備的。
全局組件：
<div id="box">
<aaa></aaa>
</div>
<script>
//組件構(gòu)造器
var Aaa=Vue.extend({
template:'<h3>我是標(biāo)題3</h3>'
})
//注冊(cè)組件
Vue.component('aaa',Aaa);
var vm=new Vue({
data:{
msg:'vue.js'
},
methods:{
}
}).$mount('#box');
</script>
</body>```
局部組件：
```<body>
<div id="box">
<aaa></aaa>
</div>
<script>
//組件構(gòu)造器
var Aaa=Vue.extend({
template:'<h3>{{msg}}</h3>',
data(){
return {
msg:'快捷快遞'
}
}
})
//注冊(cè)組件
// Vue.component('aaa',Aaa);
var vm=new Vue({
data:{
msg:'vue.js'
},
methods:{
},
components:{
'aaa':Aaa
}
}).$mount('#box');
</script>
</body>```
組件的另一種寫法：
```<body>
<div id="box">
<aaa></aaa>
</div>
<script>
Vue.component('aaa',{
template:'<strong>就家電及啊</strong>'
})
var vm=new Vue({
data:{
msg:'vue.js'
},
methods:{
},
}).$mount('#box');
</script>
</body>```
```body>
<div id="box">
<aaa></aaa>
</div>
<script>
var Home={
template:'<strong>aaa</strong>'
}
var vm=new Vue({
components:{
'aaa':Home
}
}).$mount('#box');
</script>
</body>```
```<body>
<div id="box">
<aaa></aaa>
</div>
<script>
var vm=new Vue({
components:{
'aaa':{
data:function(){
return {
msg:'vue.js'
}
},
methods:{
change:function(){
this.msg='aaaaaa'
}
},
template:'<strong @click="change">{{msg}}</strong>'
}
}
}).$mount('#box');
</script>
</body>```
組件模板：
```<body>
<div id="box">
<aaa></aaa>
</div>
<template id="aaa">
<strong @click="change">{{msg}}</strong>
</template>
<script>
var vm=new Vue({
components:{
'aaa':{
data:function(){
return {
msg:'vue.js'
}
},
methods:{
change:function(){
this.msg='aaaaaa'
}
},
template:'#aaa'
}
}
}).$mount('#box');
</script>
</body>```
動(dòng)態(tài)組件：
```<body>
<div id="box">
<aaa></aaa>
</div>
<template id="parent">
<div><!-- 必須有根元素包裹 -->
<h2>我是父組件</h2>
<strong>aaa</strong>
<bbb></bbb>
</div>
</template>
<template id="child">
<div><!-- 必須有根元素包裹 -->
<h2>我是子組件</h2>
<strong>bbb</strong>
</div>
</template>
<script>
var child={
template:'#child'
}
var parent={
template:'#parent',
components:{
'bbb':child
}
}
var vm=new Vue({
data:{
a:'aaa'
},
components:{
'aaa':parent
}
}).$mount('#box');
</script>
</body>```
這里說的是和1.0不同2.0版本必須有根元素div包裹。否則會(huì)報(bào)錯(cuò)。
父子組件的數(shù)據(jù)傳遞通過props作為橋梁來傳遞數(shù)據(jù)：
```<body>
<div id="box">
<aaa></aaa>
</div>
<template id="parent">
<div><!-- 必須有根元素包裹 -->
<h2>我是父組件</h2>
<strong>{{msg1}}</strong>
<bbb :getp="msg1"></bbb>
</div>
</template>
<template id="child">
<div><!-- 必須有根元素包裹 -->
<h2>我是子組件</h2>
<strong>{{msg2}}</strong>
獲取父組件的數(shù)據(jù)-->{{getp}}
</div>
</template>
<script>
var child={
data:function(){
return {
msg2:'我是子組件的數(shù)據(jù)'
}
},
props:['getp'],//通過props聲明自己要的數(shù)據(jù) 這是一個(gè)橋梁
template:'#child'
}
var parent={
data:function(){
return {
msg1:'我是父組件的數(shù)據(jù)'
}
},
template:'#parent',
components:{
'bbb':child
}
}
var vm=new Vue({
data:{
a:'aaa'
},
components:{
'aaa':parent,
}
}).$mount('#box');
</script>
</body>```
父子組件之間的數(shù)據(jù)變化：有些情況下我們非要想讓父組件的數(shù)據(jù)和自組件同步變化，實(shí)現(xiàn)同時(shí)變化，vue1.0版本有sync方法，但是在vue2.0中被移除，官方說他會(huì)破壞單向數(shù)據(jù)流，那么就這樣做：
1）父組件要傳一個(gè)對(duì)象給子組件也就是json形式
2）用mounted方法中轉(zhuǎn)
```<body>
<div id="box">
<aaa></aaa>
</div>
<template id="parent">
<div><!-- 必須有根元素包裹 -->
<h2>我是父組件</h2>
<strong>{{msg1.a}}</strong>
<bbb :getp="msg1"></bbb>
</div>
</template>
<template id="child">
<div><!-- 必須有根元素包裹 -->
<h2>我是子組件</h2>
<strong>{{msg2}}</strong>
<input type="button" value="按鈕" @click="change"/>
獲取父組件的數(shù)據(jù)-->{{getp.a}}
</div>
</template>
<script>
var child={
data:function(){
return {
msg2:'我是子組件的數(shù)據(jù)'
}
},
mounted:function(){
this.msg1=this.getp.a;
},
methods:{
change:function(){
this.getp.a='1111'
}
},
props:['getp'],//通過props聲明自己要的數(shù)據(jù) 這是一個(gè)橋梁
template:'#child'
}
var parent={
data:function(){
return {
msg1:{
a:'我是父組件的數(shù)據(jù)'
}
}
},
template:'#parent',
components:{
'bbb':child
}
}
var vm=new Vue({
data:{
a:'aaa'
},
components:{
'aaa':parent,
}
}).$mount('#box');
</script>
</body>```