vue动态绑定的事件为空时候该如何解决？

Question

现有动态组件：

<component
      :ref="config.name"
      :is="compName"
      v-on="$listeners"
      v-on:[config.sendParams]="sendParamsMethod"
    />

当config.sendParams这个值为空或者不传时候就不绑定该如何书写？

Answer 1

这样就可以了。完美解决！

<template>
    <component
      v-if="useType === 'comp'"
      :ref="config.name"
      :is="compName"
      v-on="{ ...$listeners, ...(sendParamsStatus ? { [config.emitEvents.sendParams]: sendParamsMethod } : {}) }"
    />
</template>
<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => {},
    }
  },
  computed: {
    sendParamsStatus() {
      return !!this.config?.emitEvents?.sendParams;
    },
  }
}
</script>