Vue.js不使用if/else怎么实现3种不同类型的错误提示展示？

核心思路是用类名映射表匹配错误类型，通过数组下标定位对应样式，完全消除分支判断，逻辑和你现有实现完全对齐：

1. 无渲染组件（Renderless.vue）优化代码 #

props: {
  errorMessage: String,
  classList: Object,
  messageList: Array,
}, 
render(h) {
  // 按错误优先级定义类名映射数组，下标和messageList一一对应
  const errorClassMap = [this.classList.errorLogin, this.classList.errorPassword]
  // 按顺序匹配第一个存在的错误对应的类名，匹配失败则用通用错误类
  const targetRowClass = errorClassMap.find((_, idx) => this.messageList[idx] !== undefined) ?? this.classList.error

  return h('div', { attrs: { class: targetRowClass } }, [
    h('div', { attrs: { class: this.classList.innerClass } }, [
      h('span', {}, this.errorMessage),
    ]),
  ])
}

2. 父组件调用侧 #

无需修改，和你当前使用的写法完全一致：

<login-error-renderless
    v-if="isError"
    :errorMessage="errorMessage"
    :classList="classList"
    :messageList = "messages"
>
</login-error-renderless>

如果后续需要新增错误类型，只需要在errorClassMap数组的对应位置新增类名即可，不需要额外加分支判断，扩展性更强。

内容的提问来源于stack exchange，提问作者Алексей