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