【Vue】组件自定义事件

在Vue中，组件之间的通信可以通过自定义事件来实现。组件可以触发和监听自定义事件，以实现父子组件或非直接关联组件之间的数据传递和交互。

以下是在Vue组件中定义和使用自定义事件的一般步骤：

1. 在子组件中定义事件：

   <template>
     <button @click="handleClick">点击按钮</button>
   </template>
   
   <script>
   export default {
     methods: {
       handleClick() {
         this.$emit('custom-event', '自定义数据');
       }
     }
   };
   </script>
   

   在上述示例中，子组件中的按钮被点击时，通过this.$emit方法触发了一个名为 custom-event 的自定义事件，并传递了一个数据 '自定义数据'。

2. 在父组件中监听事件：

   <template>
     <div>
       <child-component @custom-event="handleCustomEvent"></child-component>
       <p>{{ eventData }}</p>
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     data() {
       return {
         eventData: ''
       };
     },
     methods: {
       handleCustomEvent(data) {
         this.eventData = data;
       }
     }
   };
   </script>
   

   在上述示例中，父组件中使用 @custom-event 监听子组件触发的 custom-event 事件。当事件被触发时，父组件的 handleCustomEvent 方法会被调用，并传递了子组件传递的数据。在该方法中，可以对数据进行处理或更新父组件的状态。

通过以上步骤，子组件可以通过触发自定义事件并传递数据，将信息传递给父组件。父组件通过监听自定义事件并处理数据，实现了与子组件的通信。

此外，另一种方法是使用 ref 属性和 $refs 对象来实现父组件访问子组件的方法和属性：

在父组件中，可以通过在子组件上使用 ref 属性来创建一个引用。然后，可以使用 $refs 对象来访问该引用并调用子组件的方法或访问子组件的属性。

1. 在子组件中定义事件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始消息'
    };
  },
  methods: {
    updateMessage() {
      this.message = '更新后的消息';
    },
    childMethod() {
      console.log('子组件方法被调用');
    }
  }
};
</script>

2. 在父组件中监听事件：

<template>
  <div>
    <child-component ref="childRef"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childRef.childMethod();
    }
  }
};
</script>

在上述示例中，父组件中的 <child-component> 元素使用 ref="childRef" 将子组件的引用存储在 $refs 对象中。然后，在父组件的 callChildMethod 方法中，可以通过 this.$refs.childRef 访问子组件实例，并调用子组件的 childMethod() 方法。