vue 兄弟组件间传数据 $on() $emit() $off() $once() 实例方法/事件

vm.$on( event, callback )vue API

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

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

vm.$once( event, callback ) vue API

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

vm.$off( [event, callback] ) vue API

用法：

• 移除自定义事件监听器。

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

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

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

vm.$emit( eventName, […args] ) vue API

用法： 触发当前实例上的事件。附加参数都会传给监听器回调。
示例：只配合一个事件名使用 $emit：

<div id="emit-example-simple">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
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!')
    }
  }
})

配合额外的参数使用 $emit：

<div id="emit-example-argument">
					<!-- 添加事件侦听器  -->
  <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
</div>

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

兄弟组件传数据

	
		"utf-8" />
		"viewport" content="width=device-width, initial-scale=1">
		
	
	
		
"app">
			'handle'>销毁事件