uni-app this.$emit()传参问题

在uni-app中，this.$emit() 是用于子组件向父组件传递事件和数据的一种机制。在使用 this.$emit() 传参时，你需要确保在子组件中正确地触发事件并传递参数，同时在父组件中监听这个事件并接收传递过来的参数。

以下是一个简单的代码案例，演示如何在uni-app中使用 this.$emit() 进行传参：

子组件 (ChildComponent.vue)

<template>
  <view>
    <button @click="sendData">发送数据到父组件</button>
  </view>
</template>

<script>
export default {
  methods: {
    sendData() {
      // 触发名为 'customEvent' 的事件，并传递一个对象作为参数
      this.$emit('customEvent', { message: 'Hello from Child Component', timestamp: new Date() });
    }
  }
}
</script>

父组件 (ParentComponent.vue)

<template>
  <view>
    <child-component @customEvent="handleCustomEvent"></child-component>
    <text>{{ receivedMessage }}</text>
    <text>{{ receivedTimestamp }}</text>
  </view>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: '',
      receivedTimestamp: ''
    };
  },
  methods: {
    handleCustomEvent(eventData) {
      // 接收从子组件传递过来的参数
      this.receivedMessage = eventData.message;
      this.receivedTimestamp = eventData.timestamp;
    }
  }
}
</script>

解释

1. 子组件：在子组件中，我们定义了一个按钮，当点击按钮时，会调用 sendData 方法。在这个方法中，我们使用 this.$emit('customEvent', { ... }) 来触发一个名为 customEvent 的事件，并传递一个包含消息和时间戳的对象作为参数。

2. 父组件：在父组件中，我们导入了子组件，并在模板中使用了它。同时，我们使用 @customEvent="handleCustomEvent" 来监听子组件触发的 customEvent 事件。当事件被触发时，handleCustomEvent 方法会被调用，并接收传递过来的参数。在这个方法中，我们将接收到的消息和时间戳分别赋值给 receivedMessage 和 receivedTimestamp，然后在模板中显示它们。

通过这种方式，你可以在uni-app中实现子组件向父组件传递参数的功能。