官网介绍的很简单
例子:$emit('example1',[12,'kkk']),不去练练不知道什么意思,可以告诉你,就是触发自定义事件example1(或者函数),[]为参数
案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:example1="exampleTotal"></button-counter> <button-counter v-on:example2="exampleTotal"></button-counter> </div> </body> <script src="vue/vue.min.js"></script> <script> Vue.component(‘button-counter‘,{ template:‘<button v-on:click="example">{{ counter }}</button>‘, data:function(){ return {counter: 0}//组件数据就是这样的,函数式的,请注意 }, methods:{ example1:function(){ this.counter += 1; this.$emit(‘example1‘,[12,‘kkk‘]);//$emit } } }); new Vue({ el:‘#counter-event-example‘, data:{ total:0 }, methods:{ exampleTotal:function(e){ this.total += 1; console.log(e); } } }); </script> </html>
组件绑定了事件click然后运行increment
然后this.counter+=1;this.$emit("example1",[12,'kkk'])
然后触发事件increment1,参考文献有点乱,其他的不用管太多
然后<button-counter v-on:example1='exampleTotal'></button-counter>
v-on相当于监听吧 就触发 exampleTotal
输出 //[12,'kkk']
原文地址:http://www.cnblogs.com/hhweb/p/6678716.html