Vue单文件组件模板引用JS定义的枚举报错如何解决

Vue 模板中可直接访问的变量，必须是绑定在组件实例上的属性或方法。你在<script>块中单独导入的枚举属于模块作用域的局部变量，没有挂载到组件实例，模板渲染时无法找到对应引用，就会抛出该错误。另外你模板中写的枚举变量名为AudioCardStatus，但实际导入的变量名是Status，命名不匹配也是触发问题的原因之一。

方案1：组件内显式挂载枚举 #

这是最通用的单组件用法，导入枚举后将其绑定到组件实例上即可，因为你用Object.freeze冻结了枚举对象，Vue不会对其做响应式处理，没有额外性能损耗：

<template>
    <div v-if="status === Status.Normal">
        <!-- 业务内容 -->
    </div>
</template>

<script>
import Status from "./../enums/status"
export default {
    data() {
        return {
            // 将枚举挂载到组件实例
            Status,
            // 自身业务状态变量
            status: Status.Normal
        }
    }
}
</script>

方案2：全局注册通用枚举 #

如果该枚举需要在大量组件中复用，可以直接挂载到Vue原型上，省去每个组件重复导入的步骤：
首先在项目入口文件（通常为main.js）添加全局注册逻辑：

import Vue from 'vue'
import Status from "./enums/status"
// 建议加$前缀区分内置属性和业务属性
Vue.prototype.$Status = Status

new Vue({
    // 原有初始化配置
})

组件内无需单独导入，直接使用即可：

<template>
    <div v-if="status === $Status.Normal">
        <!-- 业务内容 -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            status: this.$Status.Normal
        }
    }
}
</script>

方案3：计算属性映射枚举判断 #

如果仅需要在模板中做固定的枚举状态判断，不需要访问全量枚举值，可以直接通过计算属性返回判断结果：

<template>
    <div v-if="isNormal">
        <!-- 业务内容 -->
    </div>
</template>
<script>
import Status from "./../enums/status"
export default {
    data() {
        return {
            status: Status.Normal
        }
    },
    computed: {
        isNormal() {
            return this.status === Status.Normal
        }
    }
}
</script>

内容的提问来源于stack exchange，提问作者joesph nguyen