c语言编程笔录

首页 >   > 笔记大全

笔记大全

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只能在实例中使用。