Follow the official website to learn Vue - events

Triggering and monitoring events: In the template expression of the component, you can directly use the $emit method to trigger custom events.
```

<button @click="$emit('someEvent')">Click me</button>
```
Or use it in a component instance method:
```
export default {
  methods: {
    submit() {
      this.$emit('someEvent');
    }
  }
}
```
The parent component can listen for events via v-on or the abbreviation @:
```
<MyComponent @some-event="callback" />
```
You can also use the .once modifier to listen to the event only once:
```
<MyComponent @some-event.once="callback" />
```

Event parameters: You can pass additional parameters when triggering the event and receive these parameters when listening to the event.

<!-- 在触发事件时传递额外的参数 -->
<button @click="$emit('increaseBy', 1)">Increase by 1</button>

<!-- 在父组件中监听事件并接收参数 -->
<MyButton @increase-by="(n) => count += n" />

Or handle events through component methods:

<MyButton @increase-by="increaseCount" />

methods: {
  increaseCount(n) {
    this.count += n;
  }
}

Declare events to be fired: You can use the emits option to explicitly declare events to be fired by a component.

export default {
  emits: ['inFocus', 'submit']
}

emitsObject syntax is also supported for validating parameters that trigger events.

export default {
  emits: {
    submit(payload) {
      // 通过返回值为 `true` 还是为 `false` 来判断验证是否通过
    }
  }
}

Event verification: Similar to type verification on props, you can use object form to add verification to events.

export default {
  emits: {
    click: null, // 没有校验
    submit: ({ email, password }) => {
      if (email && password) {
        return true;
      } else {
        console.warn('Invalid submit event payload!');
        return false;
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password });
    }
  }
}

The above are some important concepts and practices about events in Vue components. The following is a complete code example that demonstrates the above usage:

<!-- ParentComponent.vue -->

<template>
  <div>
    <MyComponent @some-event="handleSomeEvent" />
    <MyComponent @some-event.once="handleSomeEventOnce" />
  </div>
</template>

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

export default {
  components: {
    MyComponent
  },
  methods: {
    handleSomeEvent() {
      // 处理触发的事件
      console.log('Some event triggered in ParentComponent');
    },
    handleSomeEventOnce() {
      // 处理触发的事件
      console.log('once event triggered in ParentComponent');
    }
  }
}
</script>

<!-- MyComponent.vue -->

<template>
  <button @click="triggerSomeEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    triggerSomeEvent() {
      // 触发自定义事件
      this.$emit('some-event');
    }
  }
}
</script>

In this example, ParentComponent listens for the custom event MyComponent triggered by some-event and executes it when triggered corresponding processing function.

Follow the official website to learn Vue - events

Guess you like