vue中on的用法是什么
更新时间:2023-12-03一、$on的概念和用法
$on是Vue.js提供的一个用于自定义事件的方法。在Vue.js中,我们可以使用v-on来绑定DOM事件,比如click、keyup等等,但是,有时候我们需要自定义一些事件,比如在一个组件A中触发一个事件,再在另一个组件B中监听这个事件并做出响应。这时,$on就能派上用场。
在组件A中
this.$emit('my-event') //触发一个自定义事件
在组件B中
this.$on('my-event', function () {
// 响应事件
})
上面的代码就是一个简单的自定义事件的使用示例。在组件A中使用$emit触发一个名为my-event的事件,在组件B中使用$on监听这个事件,当组件A触发my-event时,组件B会做出响应。
二、$on的参数
$on有两个参数,第一个参数是事件名称,第二个参数是事件处理函数。下面是一个示例:
this.$on('my-event', function (msg) {
console.log(msg)
})
上面的代码定义了一个名为my-event的事件,并指定了一个事件处理函数。在组件中,可以使用以下代码触发这个事件:
this.$emit('my-event', 'Hello World')
下面是一个完整的示例:
<div id="app">
<button @click="emitEvent">触发事件</button>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
emitEvent: function () {
this.$emit('my-event', 'Hello World')
}
}
})
vm.$on('my-event', function (msg) {
console.log(msg) // Hello World
})
</script>
上面的代码中,我们在组件中触发了一个名为my-event的事件,并传递了一个字符串参数。在vm.$on中监听这个事件,并在事件处理函数中打印出这个参数。
三、$on的注意事项
在使用$on时,需要注意以下几点:
- $on只能在实例中使用。也就是说,不能在一个组件中监听父级组件触发的事件。
- $on和$emit方法必须使用相同的事件名称。
- 每次使用$on时,都需要手动移除事件监听。否则,可能会导致事件监听器重复绑定,从而导致事件响应出现异常。
接下来是一个具有挑战性的示例:
<div id="app">
<child></child>
</div>
<script>
Vue.component('child', {
template: '<div></div>',
mounted: function () {
this.$parent.$on('my-event', function () {
console.log('child 执行一次')
})
},
beforeDestroy: function () {
this.$parent.$off('my-event')
}
})
var vm = new Vue({
el: '#app',
data: {
message: 'Hello World'
},
mounted: function () {
this.$on('my-event', function () {
console.log('parent 执行一次')
})
},
methods: {
triggerEvent: function () {
this.$emit('my-event')
}
}
})
</script>
上面的代码中,我们定义了一个组件child,当父组件的my-event事件触发时,child会执行一个事件处理函数,并在控制台输出一行信息。在父组件中,我们使用vm.$on绑定一个my-event事件,并在事件处理函数中输出另一行信息。在页面中,我们通过一个按钮来触发这个事件。
作为挑战,你能否思考一下,当我们连续点击多次按钮时,会发生什么情况?为什么?
四、总结
$on是Vue.js提供的一个用于自定义事件的方法,可以让我们在组件之间进行事件通信。一个组件通过$emit触发一个事件,而另一个组件则可以使用$on来监听这个事件并做出响应。在使用$on时,需要注意每次绑定事件时都要手动移除事件监听,否则可能会导致事件响应出现异常。$on和$emit方法必须使用相同的事件名称,而且$on只能在实例中使用。