vue 自定义事件传值和回调函数

在 Vue 中，可以使用自定义事件来传递值和回调函数。下面是一种常见的方式：

1. 定义一个子组件，可以使用 `this.$emit()` 触发自定义事件，并传递值或回调函数。

// 子组件
<template>
  <button @click="handleClick">点击触发事件</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 传递值
      this.$emit('custom-event', '传递的值');

      // 传递回调函数
      const callback = () => {
        console.log('回调函数被触发');
      };
      this.$emit('custom-event', callback);
    }
  }
};
</script>

2. 在父组件中使用子组件，并监听自定义事件。

// 父组件
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleCustomEvent(payload) {
      // 处理传递的值
      console.log('接收到的值：', payload);

      // 处理传递的回调函数
      if (typeof payload === 'function') {
        payload();
      }
    }
  }
};
</script>

在父组件中，通过 `@custom-event` 监听子组件触发的自定义事件，并在回调函数中处理传递的值或回调函数。

通过这种方式，你可以在 Vue 组件间灵活地传递值和回调函数。