实例方法 / 事件

vm.$on

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

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

vm.$once( event, callback )

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

vm.$off

移除自定义事件监听器。

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

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

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

vm.$emit

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

Vue.component('welcome-button', {template: `<button v-on:click="$emit('welcome')">Click me to be welcomed</button>`
})

<div id="emit-example-simple"><welcome-button v-on:welcome="sayHi"></welcome-button>
</div>

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

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

Vue.component('magic-eight-ball', {data: function () {return {possibleAdvice: ['Yes', 'No', 'Maybe']}},methods: {giveAdvice: function () {var randomAdviceIndex = 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>`
})

<div id="emit-example-argument"><magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
</div>

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