1. 基本原理
子组件可以借助 $emit 触发一个自定义事件，父组件监听这个自定义事件，当事件触发时，父组件执行对应的处理函数。
2. 基本语法
在子组件里，使用 this.$emit('事件名', 参数) 触发自定义事件，参数是可选的。
在父组件中，通过 @事件名="处理函数" 监听子组件触发的事件。
3. 简单示例
子组件（Child.vue）
<template><button @click="sendMessage">发送消息给父组件</button>
</template><script>
export default {methods: {sendMessage() {this.$emit('customEvent', '这是来自子组件的消息');}}
}
</script>在这个子组件中，定义了一个按钮，点击按钮时调用 sendMessage 方法，该方法使用 $emit 触发名为 customEvent 的自定义事件，并传递了一个字符串参数。
父组件（Parent.vue）
<template><view><child @customEvent="handleCustomEvent"></child><text>{{ messageFromChild }}</text></view>
</template><script>
import Child from './Child.vue';export default {components: {Child},data() {return {messageFromChild: ''};},methods: {handleCustomEvent(message) {this.messageFromChild = message;}}
}
</script>在父组件中，引入并使用了子组件 Child，通过 @customEvent="handleCustomEvent" 监听子组件触发的 customEvent 事件。当事件触发时，调用 handleCustomEvent 方法，该方法接收子组件传递的参数，并将其赋值给 messageFromChild 变量。
4. 携带多个参数
子组件可以传递多个参数给父组件。
子组件（Child.vue）
<template><button @click="sendData">发送多个参数</button>
</template><script>
export default {methods: {sendData() {this.$emit('multiParamsEvent', '参数1', 123);}}
}
</script>父组件（Parent.vue）
<template><view><child @multiParamsEvent="handleMultiParamsEvent"></child></view>
</template><script>
import Child from './Child.vue';export default {components: {Child},methods: {handleMultiParamsEvent(param1, param2) {console.log('接收到的参数1:', param1);console.log('接收到的参数2:', param2);}}
}
</script>在这个例子中，子组件触发 multiParamsEvent 事件时传递了两个参数，父组件的处理函数接收这两个参数并进行处理。
5. 动态事件名
在某些场景下，事件名可以是动态的。
子组件（Child.vue）
<template><button @click="sendDynamicEvent">发送动态事件</button>
</template><script>
export default {methods: {sendDynamicEvent() {const eventName = 'dynamicEvent';this.$emit(eventName, '动态事件的数据');}}
}
</script>父组件（Parent.vue）
<template><view><child @dynamicEvent="handleDynamicEvent"></child></view>
</template><script>
import Child from './Child.vue';export default {components: {Child},methods: {handleDynamicEvent(data) {console.log('接收到的动态事件数据:', data);}}
}
</script>6. 注意事项
- 事件名大小写：在 HTML 模板中，事件名会自动转换为小写，因此建议使用短横线命名法（如
custom-event）来定义事件名。 - 单向数据流：虽然
$emit用于子组件向父组件传递数据，但要遵循单向数据流原则，避免在子组件中直接修改父组件的数据。
