Vue全局API
component父子組件
當一個自定義組件裏面需要用到其他自定義組件時，就需要一個父子關係的組件。
1.在vue構造器外面定義component組件
在構造器外部註冊局部組件，即將組件(對象)寫在vue構造器之外
<script type="text/javascript">
var hui={
template:`<p style="color:red">這是組件</p>`
}
var test=new Vue({
el:'.demo',
data:{
messages:'這是component父子組件'
},
components:{
'hui':hui
}
})
</script>
在構造器外定義好組件後，在構造器裏面直接聲明就可以使用啦。（聲明好對象後在構造器裏引用就可以了。）
components:{
'hui':hui
}
2.component父子組件的嵌套
先自定義一個父組件—》hui
子組件是-----》city
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>components03父子組件</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<div class="demo">
<hui></hui>
</div>
<script type="text/javascript">
var city={ <!--這是子組件-->
template:`<p style="color:red">這是子組件</p>`
}
var hui={ <!--這是父組件-->
template:`
<div>
<h2 style="color:green">這是組件定義在構造器外部</h2>
<city></city>
</div>`,
components:{
'city':city
}
}
var test=new Vue({
el:'.demo',
data:{
messages:'這是component父子組件'
},
components:{
'hui':hui
}
})
</script>
</body>
</html>
運行結果：
在父組件的模板中對子組件進行聲明，需要在父組件對象中利用components對子組件進行聲明。組件名稱需要用雙引號引起來，是以字符串的形式進行掛載的。
var hui={ <!--這是父組件-->
template:`
<div>
<h2 style="color:green">這是組件定義在構造器外部</h2>
<city></city>
</div>`,
components:{
'city':city
}
}
