首先我们在外部建立一个组件xiaofan,并构造好其模版。
var xiaofan = { template:`<div>Panda from China!</div>` }
然后在构造器中引用这个组件
components:{ "xiaofan":xiaofan }
在html使用这个组件
<xiaofan> </xiaofan>
然后我们构造一个子组件
var city={ template:`<div>Sichuan of China</div>` }
然后我们在构造xiaofan的组件中建立一个组件方法components,然后引用这个组件，并且在模板中加入这个组件。
var xiaofan = { template:`<div> <p>Panda from China! <p> <city></city></div>`,
components:{
"xiaofan":xiaofan
}
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>component-3</title>
</head>
<body>
<h1>component-3</h1>
<hr>
<div id="app">
<xiaofan></xiaofan>
</div>
<script type="text/javascript">
var city={
template:`<div>Sichuan of China</div>`
}
var xiaofan = {
template:`<div>
<p> Panda from China!</p>
<city></city>
</div>`,
components:{
"city":city
}
}
var app=new Vue({
el:‘#app‘,
components:{
"xiaofan":xiaofan
}
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/xiaofandegeng/p/9029088.html