原文：Vue父组件调用子组件事件的两种方法
首先我们要了解$on和$emit
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>