<div id="app">
    <h2>{{num}}</h2>  
    <h1>全域性元件</h1>
    <my-component @myclick="vueAdd"></my-component>  <!-- 渲染全域性元件-->
</div>
</body>
</html>
<script>
/* 

*/

    Vue.component('my-component',{     // 全域性元件語法
        template:`<div
 
>                //模板字串
                     <h2>{{n}}</h2>
                     <button @click="add">+1</button>
                  </div>`,
        data(){                        //data是個函式，初始化全域性元件的變數n
            return {
                n:0   
            }
        },
        methods:{           
            add(){                      //這裡定義的方法只用在全域性元件中的template中
                
 
this.n += 1;
                this.$emit('myclick');   //$emit自定義事件 $emit(事件名字) 不要使用駝峰
            }
        }
    });
//例項化
    new Vue({
        el:'#app',
        data:{
            num:0    //初始化 num     // 例項化中的data是個josn形式的物件，初始化#app容器中的變數
        },
        methods:{                   // 例項化中的methods方法也用在 #app 容器裡使用
            vueAdd(){ 
                
 
this.num += 1;  
            }
        }
    })
</script>