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>