实例组件通过components，指定子组件，疯狂套娃。
我是分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--3. 使用组件-->
<son></son>
<hr>
<father></father>
</div>
<hr>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1.创建父组件构造器
const son = Vue.extend({
template: `
<div>
<span>我是儿子</span>
</div>`
});
//1.创建组件构造器，通过在组件构造器中构造子组件
const father = Vue.extend({
template: `
<div>
<span>我是爸爸</span>
<son></son>
</div>`,
components:{
son:son,
}
});
let app = new Vue({
el: '#app',
//2. 注册局部组件
components: {
father:father,
son:son,
}
});
</script>
</body>
</html>
我是分割线
前台效果：
Title