使用 $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
转自https://www.cnblogs.com/yanqiong/p/11249417.html