<!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("mycpn1",{
            template:'<div><h2>我是标题1</h2><p>我是内容</p><p>我是安徽</p></div>'
        });



    const app=new Vue({         /*看成root组件*/
        el:'#app',
        data:{
        },
        components:{
            // //    cpn是使用组件是的标签名
            // mycpn1: cpn1,  /*不注册则会出错，需要考虑作用域问题*/
            // mycpn2:cpn2

            //注册局部变量的语法糖实现
            mycpn2:{         template:'<div><h2>我是标题2</h2><p>我是内容</p><p>我是安徽</p></div>'
            }

        }
    })
</script>
</body>
</html>