在vue事件中,与之相关的两个属性是$emit、$on这个属性,其中$emit是用来触发当前实例上的事件的,$on是用来监听当前实例上的自定义事件的,可以由$emit触发,这一对属性有点类似于触发事件与事件处理程序分开这一原理,既可以传播也可以方便监听修改
$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>
`
})
从以上可以看出,$emit有两个参数(事件名,值),
Vue.component('welcome-button', {
template: `
<button v-on:click="$emit('welcome')">
Click me to be welcomed
</button>
`
})
只有一个事件名
$on
这个属性就比较单一了,他有两个参数(事件名或者参数值,回调函数)
vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"