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
}
}
