vue2.x study notes (nineteen)

Then the previous content: https://www.cnblogs.com/yanggb/p/12631022.html .

Programmatic event listener

In the previous study, we already know the usage of the [$ emit] global attribute, which can be intercepted by the [v-on] command, but the vue instance also provides other methods in its event interface. We can:

1. Listen to an event through [$ on (eventName, eventHandler)].

2. Use [$ once (eventName, eventHandler)] to listen to one event at a time.

3. Stop listening for an event through [$ off (eventName, eventHandler].

You usually don't use these, but they are useful when you need to manually listen for events on a component instance. They can also be used for code organization tools. For example, you may often see this pattern of inheriting a third-party library:

// Append this date picker to an input box at once, it will be mounted on the DOM. 
mounted: function () {
   // Pikaday is a third-party date picker library 
  this .picker = new Pikaday ({ 
    field: this . $ refs.input, 
    format: 'YYYY-MM-DD' 
  }) 
}, 
// The date picker is also destroyed before the component is destroyed . 
beforeDestroy: function () {
   this .picker.destroy () 
}

There are two potential problems here:

1. It needs to save the picker in this component instance, if possible, it is best to only have access to it by life cycle hooks. This is not a serious problem, but it can be regarded as a clutter.

2. Our build code is independent of our cleanup code, which makes it more difficult for us to programmatically clean up everything we build.

You should solve these two problems through a programmatic listener:

mounted: function () {
  var picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })

  this.$once('hook:beforeDestroy', function () {
    picker.destroy()
  })
}

The hook here is the component name. Using this strategy, we can even make multiple input box elements use different pikadays at the same time, and each new instance can programmatically clean itself up later.

mounted: function () {
  this.attachDatepicker('startDateInput')
  this.attachDatepicker('endDateInput')
},
methods: {
  attachDatepicker: function (refName) {
    var picker = new Pikaday({
      field: this.$refs[refName],
      format: 'YYYY-MM-DD'
    })

    this.$once('hook:beforeDestroy', function () {
      picker.destroy()
    })
  }
}

However, it should be noted that even so, if you find yourself having to do a lot of building and cleaning in a single component, the best way is usually to create more modular components. Therefore, in the above example, the official document recommends creating a reusable <input-datepicker> component.

Another thing to note is that vue's event system is different from the browser's eventtarget api. Although they work similarly, [$ emit], [$ on], and [$ off] are not [dispatchEvent], [addEventListener ] And [removeEventListener] alias, the underlying implementation is also different.

 

"I still like you very much, like Kunpeng swaying 90,000 miles, non-inhabited."