跟着官网学 Vue - 透传 Attributes

逃离我推掉我的手 2024-02-05 16:12 2阅读 0赞

#### `MyButton.vue` ####

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

<template>
      
      <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` 方法。

<template>
      <div>
        
        <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>