uni-app 微信小程序分包后 异步引入组件事件行为异步 无法获取正常传入的参数

在uni-app中，对微信小程序进行分包处理可以优化小程序的加载速度和用户体验。然而，分包后异步引入组件可能会遇到事件行为异步、无法获取正常传入参数的问题。这通常是由于组件的加载时机和事件处理逻辑不匹配所导致的。以下是一个简化的代码案例，展示了如何在分包情况下正确处理组件的异步加载和事件传递。

主包代码 (main.js / pages/index/index.vue)

首先，在主包中定义一个页面，该页面将异步加载分包中的组件。

<template>
  <view>
    <button @click="loadComponent">Load Component</button>
    <view v-if="componentLoaded">
      <custom-component @custom-event="handleEvent"></custom-component>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      componentLoaded: false,
      CustomComponent: null
    };
  },
  methods: {
    async loadComponent() {
      // 异步加载分包组件
      const { default: Component } = await import('../../subPackages/myComponent/myComponent.vue');
      this.CustomComponent = Component;
      this.componentLoaded = true;
    },
    handleEvent(payload) {
      console.log('Received event payload:', payload);
    }
  },
  components: {
    // 动态注册组件
    'custom-component': null
  },
  watch: {
    componentLoaded(loaded) {
      if (loaded) {
        this.$options.components['custom-component'] = this.CustomComponent;
      }
    }
  }
};
</script>

分包代码 (subPackages/myComponent/myComponent.vue)

在分包中定义组件，并触发自定义事件。

<template>
  <view>
    <button @click="triggerEvent">Trigger Event</button>
  </view>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('custom-event', { message: 'Hello from sub-package component!' });
    }
  }
};
</script>

注意事项

1. 组件注册时机：确保组件在加载完成后才进行注册，以避免因组件未定义而导致的错误。
2. 事件监听：在组件加载并注册后，确保事件监听器已经正确绑定。
3. 异步处理：使用async/await或Promise处理异步加载，确保组件加载逻辑的正确性。

通过上述代码，我们实现了在uni-app中对微信小程序进行分包处理时，异步加载组件并正确处理事件传递的功能。这种方式可以有效避免由于组件加载异步导致的事件处理异常问题。