### 構造器外部寫局部注冊組件
上面上課我們都把局部組件的編寫放到了構造器內部，如果組件代碼量很大，會影響構造器的可讀性，造成拖拉和錯誤。
我們把組件編寫的代碼放到構造器外部或者說單獨文件。
我們需要先聲明一個對象,對象里就是組件的內容。
~~~
var jspang = {
template:`<div>Panda from China!</div>`
}
~~~
聲明好對象后在構造器里引用就可以了。
~~~
components:{
"jspang":jspang
}
~~~
html中引用
`<jspang></jspang>`
### 父子組件的嵌套
我們先聲明一個父組件，比如叫jspang，然后里邊我們加入一個city組件，我們來看這樣的代碼如何寫。
~~~javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>conponent3</title>
<script type="text/javascript" src="../assets/js/vue.js" ></script>
</head>
<body>
<h1>component3</h1>
<hr>
<div id="app">
<lv></lv>
</div>
<script type="text/javascript">
var city = {
template:`<p>這是兩只可愛的驢!</p>`
}
var lvComponent = {
template:`
<div>
<img src="../assets/img/lv.jpg">
<city></city>
</div>`,
components:{
"city":city
}
}
var app = new Vue({
el:'#app',
data:{
message:'四川'
},
components:{
"lv":lvComponent
}
// data:{
// message:'hello world',
// }
});
</script>
</body>
</html>
~~~
