MyButton.vue

这是子组件，它是一个包含按钮的简单组件。它有一个按钮，当按钮被点击时，会触发 handleClick 方法。MyButton 组件中禁用了属性继承，以避免多次触发点击事件。

<!-- MyButton.vue -->
<template><!-- 使用 div 包装 button，并应用透传的属性 --><div class="btn-wrapper"><button class="btn" v-bind="$attrs" @click="handleClick"><slot></slot></button></div>
</template><script>
export default {inheritAttrs: false, // 禁用属性继承,不然又多触发一次// inheritAttrs: true,methods: {handleClick(event) {// handleClick() {// this.$emit('click', event); 的作用是触发一个名为 'click' 的自定义事件，// 父组件可以通过监听这个事件来执行相应的处理逻辑。在这里，event 参数是原始的点击事件对象，它会被传递给父组件中的 handleClick 方法。this.$emit('click', event);console.log('子组件中的点击事件触发');}}
}
</script>

ParentComponent.vue

这是父组件，它包含一个 MyButton 组件。在模板中，通过 <MyButton> 标签使用了 MyButton 组件，并传递了 class 和 @click 事件。当 MyButton 组件中的按钮被点击时，会触发父组件中的 handleClick 方法。

<!-- ParentComponent.vue -->
<template><div><!-- 使用 MyButton 组件，并传递 class 和 click 事件 --><MyButton class="large" @click="handleClick">Click me</MyButton></div>
</template><script>
import MyButton from './MyButton.vue';export default {components: {MyButton},methods: {handleClick(event) {console.log('父组件中的点击事件触发');console.log('原始事件对象:', event);}}
}
</script>