Component 父子组件关系
在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件,这就需要一个父子组件关系。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>component-father</title>
</head>
<body>
<h1>component-father</h1>
<hr>
<div id="app">
<jspang></jspang>
</div>
<script type="text/javascript">
//我们需要先声明一个对象,对象里就是组件的内容。
var city={
template:`<div>Sichuan of China</div>`
}
var jspang = {
template:`<div>
<p> Panda from China!</p>
<city></city>
</div>`,
//加入一个city组件
components:{
"city":city
}
}
//注册局部组件:只注册到一个vue实例
var app=new Vue({
el:'#app',
components:{
"jspang":jspang
}
})
</script>
</body>
</html>