vue.js 自定义事件

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

原文地址：https://www.cnblogs.com/hujun-2018/p/10023777.html