<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<div id="app">
<!--    组件的代码为什么必须是一个函数？-->
<!--    组件实例，没有共享同意个数据，因为他是一个函数，每次执行的时候会创建一个新的返回值，彼此独立-->
    <mycpn1></mycpn1><!--使用自定义的组件名称-->
    <mycpn1></mycpn1><!--使用自定义的组件名称-->
    <mycpn1></mycpn1><!--使用自定义的组件名称-->
</div>
<body>

<template id="cpn1">
    <div>
        <h2>当前计数:{{counter}}</h2>
        <button @click="increament">+</button>
        <button @click="decreament">-</button>
    </div>
</template>


<script src="vue.js"></script>
<script>
// <!--    用来实现三个组件合并-->
    const obj={
        counter: 0
    };

    //全局注册的语法糖的实现
    //这样会实现，各个组件之间彼此独立
    Vue.component("mycpn1",{
        template:'#cpn1',
        data(){
            // return{
            //     counter:0
            // }

        //    如果希望将三个组件合并（一般不会使用）
            return obj;

        },
        methods:{
            increament(){
                return this.counter++
            },
            decreament(){
                return this.counter--
            }
        }
    });


    const app=new Vue({         /*看成root组件*/
        el:'#app',
        data:{
        },
        components:{
        }
    })
</script>
</body>
</html>