<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<div id="app">
<mycpn1></mycpn1><!--使用自定义的组件名称-->
<mycpn2></mycpn2><!--使用自定义的组件名称-->
</div>
<body>
<script src="vue.js"></script>
<script>
// 1创建一个组件构造器对象（子组件）
const cpn1=Vue.extend({
template:‘<div><h2>我是标题1</h2><p>我是内容</p><p>我是安徽</p></div>‘
});
// 1创建第二个组件构造器对象（父组件）
const cpn2=Vue.extend({
template:‘<div><h2>我是标题2</h2><p>我是内容</p><p>我是安徽</p><mycpn1></mycpn1></div>‘,
components:{
mycpn1:cpn1 /*在某一个组件内部创建了另一个组件 只需要在Vue中实现2即可以同时实现1和2*/
}
});
//2注册组件（全局组件，意味着可以在多个Vue的实例中使用） (自定义名字，组件)；
//在某个Vue的实例下注册，得到的是局部组件
// Vue.component("my-cpn",cpn);
const app=new Vue({ /*看成root组件*/
el:‘#app‘,
data:{
},
components:{
// cpn是使用组件是的标签名
mycpn1: cpn1, /*不注册则会出错，需要考虑作用域问题*/
mycpn2:cpn2
}
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/Damocless/p/11913831.html