如何在Vue.js的template模板中使用已导入的自定义常量？

问题原因 #

• 首先你导入常量的写法存在错误：你的tipsConstants.js中使用的是命名导出export const TIPS，不是默认导出，导入时需要用解构语法import { TIPS } from '../../constants/tipsConstants'，否则导入的TIPS为undefined。
• 其次Vue的template模板默认只能访问当前组件实例上挂载的属性（包括data、props、computed、methods等），单独在script顶部导入的常量不在实例作用域内，template无法识别，因此会触发TIPS is defined but never used的ESLint报错。

解决方案 #

场景1：仅当前组件需要使用该常量 #

推荐挂载到computed属性，避免不必要的响应式监听，性能更优：

// 先修正导入写法
import { TIPS } from '../../constants/tipsConstants'
  
export default {
  name: 'Main',
  props: {
    // 你的props定义
  },
  computed: {
    // 把常量挂载为计算属性
    TIPS: () => TIPS
  }
}

修改后就能直接在template中按TIPS.TIP_A的写法使用了。

如果习惯用data也可以，写法如下（不推荐，会给常量加无意义的响应式监听）：

data() {
  return {
    TIPS
  }
}

场景2：项目多个组件都需要使用该常量 #

可以直接将常量全局挂载，不需要每个组件单独导入：

Vue2 全局挂载

在项目入口main.js中添加：

import Vue from 'vue'
import { TIPS } from './constants/tipsConstants'
// 挂载到Vue原型
Vue.prototype.$TIPS = TIPS

所有组件的template中直接使用$TIPS.TIP_A即可，script中可以通过this.$TIPS访问。

Vue3 全局挂载

在项目入口main.js中添加：

import { createApp } from 'vue'
import App from './App.vue'
import { TIPS } from './constants/tipsConstants'

const app = createApp(App)
// 挂载到全局属性
app.config.globalProperties.$TIPS = TIPS
app.mount('#app')

使用方法和Vue2一致。

Vue3 Composition API 场景 #

如果是使用setup选项的组件，直接在setup中return常量即可：

import { TIPS } from '../../constants/tipsConstants'

export default {
  setup() {
    // 其他逻辑
    return {
      TIPS
    }
  }
}

如果是<script setup>语法糖，不需要额外return，导入后即可直接在template中使用。

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