vue实践之项目积累-----$emit、$on

在vue事件中，与之相关的两个属性是$emit、$on这个属性，其中$emit是用来触发当前实例上的事件的，$on是用来监听当前实例上的自定义事件的，可以由$emit触发，这一对属性有点类似于触发事件与事件处理程序分开这一原理，既可以传播也可以方便监听修改

---

$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>
  `
})

从以上可以看出，$emit有两个参数（事件名，值），

Vue.component('welcome-button', {
  template: `
    <button v-on:click="$emit('welcome')">
      Click me to be welcomed
    </button>
  `
})

只有一个事件名

---

$on

这个属性就比较单一了，他有两个参数（事件名或者参数值，回调函数）

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