vue-实例方法 / 事件

vm.$on( event, callback )

参数：

{string | Array<string>} event (数组只在 2.2.0+ 中支持)

{Function} callback

用法：

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

示例：

vm.$on('test',function(msg){console.log(msg)})vm.$emit('test','hi')// => "hi"

vm.$once( event, callback )

参数：

{string} event

{Function} callback

用法：

监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

vm.$off( [event, callback] )

参数：

{string | Array<string>} event (只在 2.2.2+ 支持数组)

{Function} [callback]

用法：

移除自定义事件监听器。

如果没有提供参数，则移除所有的事件监听器；

如果只提供了事件，则移除该事件所有的监听器；

如果同时提供了事件与回调，则只移除这个回调的监听器。

vm.$emit( eventName, […args] )

参数：

{string} eventName

[...args]

触发当前实例上的事件。附加参数都会传给监听器回调。

示例：

只配合一个事件名使用 $emit：

Vue.component('welcome-button', {template:`

    <button v-on:click="$emit('welcome')">

      Click me to be welcomed

    </button>

  `})

newVue({el:'#emit-example-simple',methods: {sayHi:function(){      alert('Hi!')    }  }})

Click me to be welcomed

配合额外的参数使用 $emit：

Vue.component('magic-eight-ball', {data:function(){return{possibleAdvice: ['Yes','No','Maybe']    }  },methods: {giveAdvice:function(){varrandomAdviceIndex =Math.floor(Math.random() *this.possibleAdvice.length)this.$emit('give-advice',this.possibleAdvice[randomAdviceIndex])    }  },template:`

    <button v-on:click="giveAdvice">

      Click me for advice

    </button>

  `})

newVue({el:'#emit-example-argument',methods: {showAdvice:function(advice){      alert(advice)    }  }})

Click me for advice