vm. o n ( e v e n t , c a l l b a c k ) : 监 听 当 前 实 例 上 的 自 定 义 事 件 。 事 件 可 以 由 v m . on( event, callback ):监听当前实例上的自定义事件。事件可以由vm. on(event,callback):监听当前实例上的自定义事件。事件可以由vm.emit触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$emit( event, […args] ):触发当前实例上的事件。附加参数都会传给监听器回调。
父组件中:
<template>
<div>
<div @click="click">点击父组件</div>
<child ref="child"></child>
</div>
</template>
<script>
import child from "./child";
export default {
methods: {
click() {
this.$refs.child.$emit('childMethod','发送给方法一的数据') // 方法1:触发监听事件
this.$refs.child.callMethod() // 方法2:直接调用
},
},
components: {
child,
}
}
</script>
子组件中:
<template>
<div>子组件</div>
</template>
<script>
export default {
mounted() {
this.monitoring() // 注册监听事件
},
methods: {
monitoring() { // 监听事件
this.$on('childMethod', (res) => {
console.log('方法1:触发监听事件监听成功')
console.log(res)
})
},
callMethod() {
console.log('方法2:直接调用调用成功')
},
}
}
</script>