11.Vue实例的处理事件的方法

1. vm.$on( event, callback )——监听当前实例上的自定义事件

• 参数：

  • {string | Array<string>} event (数组只在 2.2.0+ 中支持)
  • {Function} callback

• 用法：

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

• 示例：

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

  

  

2.vm.$once( event, callback )—— 监听一个自定义事件，但是只触发一次

• 参数：

  • {string} event
  • {Function} callback

• 用法：

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

  

3. vm.$off( [event, callback] )——移除自定义事件监听器

• 参数：

  • {string | Array<string>} event (只在 2.2.2+ 支持数组)
  • {Function} [callback]

• 用法：

  移除自定义事件监听器。

  • 如果没有提供参数，则移除所有的事件监听器；
  • 如果只提供了事件，则移除该事件所有的监听器；
  • 如果同时提供了事件与回调，则只移除这个回调的监听器。

  

4. vm.$emit( eventName, […args] )——触发当前实例上的事件

• 参数：

  • {string} eventName
  • [...args]

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

  

  

• 示例：

  • 只配合一个事件名使用 $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)
      }
    }
  })