<!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>