Question

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"

vm.$once( event, callback )

• 参数：

• {string} event

• {Function} callback

• 用法：

监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。

vm.$off( [event, callback] )

• 参数：

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

• {Function} [callback]

• 用法：

移除自定义事件监听器。

• 如果没有提供参数，则移除所有的事件监听器；

• 如果只提供了事件，则移除该事件所有的监听器；

• 如果同时提供了事件与回调，则只移除这个回调的监听器。

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!')
    }
  }
})

<div id="emit-example-simple" class="demo">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
<script>
  Vue.component('welcome-button', {
    template: `
      <button v-on:click="$emit('welcome')">
        Click me to be welcomed
      </button>
    `
  })
  new Vue({
    el: '#emit-example-simple',
    methods: {
      sayHi: function () {
        alert('Hi!')
      }
    }
  })
</script>

配合额外的参数使用 $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)
    }
  }
})

<div id="emit-example-argument" class="demo">
  <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
</div>
<script>
  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>
    `
  })
  new Vue({
    el: '#emit-example-argument',
    methods: {
      showAdvice: function (advice) {
        alert(advice)
      }
    }
  })
</script>