跟着官网学 Vue - 透传 Attributes

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>