### 构造器外部写局部注册组件
上面上课我们都把局部组件的编写放到了构造器内部，如果组件代码量很大，会影响构造器的可读性，造成拖拉和错误。
我们把组件编写的代码放到构造器外部或者说单独文件。
我们需要先声明一个对象,对象里就是组件的内容。
~~~
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>
~~~
