console
<!DOCTYPE html>
<html lang="en">
<head>
<title>component-3 父子组件</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>component-3 父子组件</h1>
<hr>
<div id="app">
<panda></panda>
<city></city>
</div>
<script type="text/javascript">
var cityComponent = {//根据加载顺序，要先写子组件，不然会报Unknown custom element: <city> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
template: `<div style="color:green">SiChuan of China</div>`,
};
var pandaComponent = {
template: `
<div style="color:red">
<p>Panda from China</p>
<city></city>
</div>
`,
components: {
"city": cityComponent
}
};
var app = new Vue({
el: '#app',
components: {
"panda": pandaComponent,
"city": cityComponent,
}
})
</script>
</body>
</html>