跟着官网学 Vue - 事件

触发与监听事件： 在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件。
```

<button @click="$emit('someEvent')">Click me</button>
```
或者在组件实例方法中使用：
```
export default {
  methods: {
    submit() {
      this.$emit('someEvent');
    }
  }
}
```
父组件可以通过 v-on 或缩写 @ 来监听事件：
```
<MyComponent @some-event="callback" />
```
也可以使用 .once 修饰符来只监听一次事件：
```
<MyComponent @some-event.once="callback" />
```

事件参数： 可以在触发事件时传递额外的参数，并在监听事件时接收这些参数。

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

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

或者通过组件方法处理事件：

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

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

声明触发的事件： 可以使用 emits 选项显式地声明组件要触发的事件。

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

emits 也支持对象语法，用于对触发事件的参数进行验证。

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

事件校验： 类似于对 props 进行类型校验，可以使用对象形式为事件添加校验。

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 });
    }
  }
}

以上是关于 Vue 组件中事件的一些重要概念和实践。下面是一个完整的代码案例，演示了上述的使用方法：

<!-- 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>

在这个例子中，ParentComponent 监听了 MyComponent 触发的自定义事件 some-event，并在触发时执行了相应的处理函数。

扫描二维码关注公众号，回复： 17226058 查看本文章

跟着官网学 Vue - 事件

猜你喜欢