使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
Api 中的解释:
vm.$emit( event, […args] )
参数:
{string} event
[…args]
触发当前实例上的事件。附加参数都会传给监听器回调。
vm.$on( event, callback )
参数:
{string | Array} event (数组只在 2.2.0+ 中支持) {Function} callback
用法:
监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
<template> <div> <p @click='emit'>{{msg}}</p> </div> </template> <script> export default { name: 'demo', data () { return { msg : '点击后派发事件' } }, created () { this.$on('wash_Goods',(arg)=> { console.log(arg) }) }, methods : { emit () { this.$emit('wash_Goods',['fish',true,{name:'vue',verison:'2.4'}]) } } } </script>
<template> <div> <p @click='emit'>{{msg}}</p> <p @click='emitOther'>{{msg2}}</p> </div> </template> <script> export default { name: 'demo', data () { return { msg : '点击后派发事件', msg2 : '点击后派发事件2', } }, created () { this.$on(['wash_Goods','drive_Car'],(arg)=> { console.log('真多事') }) this.$on('wash_Goods',(arg)=> { console.log(arg) }) this.$on('drive_Car',(...arg)=> { console.log(BMW,Ferrari) }) }, methods : { emit () { this.$emit('wash_Goods','fish') }, emitOther () { this.$emit('drive_Car',['BMW','Ferrari']) } } } </script>
子组件到父组件通讯
<hello @pfn="parentFn"></hello> <script> Vue.component('hello', { template: '<button @click="fn">按钮</button>', methods: { // 子组件:通过$emit调用 fn() { this.$emit('pfn', '这是子组件传递给父组件的数据') } } }) new Vue({ methods: { // 父组件:提供方法 parentFn(data) { console.log('父组件:', data) } } }) </script>
非父子组件通讯
var bus = new Vue()
// 在组件 B 绑定自定义事件
bus.$on('id-selected', function (id) {
// ...
})
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)