在uniapp使用$emit

在 uni-app 中，我们可以通过 `$emit` 方法触发一个自定义事件。使用 `$emit` 的步骤如下：

1. 在需要监听事件的组件中，使用 `v-on` 或 `@` 绑定监听事件，例如：

<template>
  <button @click="handleClick">点击发送事件</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      // 触发自定义事件
      this.$emit('custom-event', '这是传递的参数');
    }
  }
}
</script>

2. 在需要响应事件的组件中，使用 `v-on` 或 `@` 绑定事件处理函数，例如：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    // 监听自定义事件
    this.$on('custom-event', this.handleCustomEvent);
  },
  methods: {
    handleCustomEvent(data) {
      console.log(data); // 打印：这是传递的参数
      this.message = data;
    }
  },
  beforeDestroy() {
    // 在组件销毁前，取消监听事件
    this.$off('custom-event', this.handleCustomEvent);
  }
}
</script>

在上面的示例中，我们在发送事件的组件中，通过 `$emit` 方法触发了一个名为 `custom-event` 的自定义事件，并且传递了一个字符串参数。在响应事件的组件中，我们使用 `$on` 方法监听了这个自定义事件，并且提供了一个事件处理函数 `handleCustomEvent`。当自定义事件被触发时，事件处理函数会被调用，接收到传递的参数，并且更新了组件的数据，最终渲染到页面上。在组件销毁前，我们使用 `$off` 方法取消了对事件的监听。