当前位置：首页 > news >正文

vue 引入配置的常量时，常量内部怎么引用 vue 中的值

news 来源：原创 2025/5/25 9:11:18

主要想实现将一些常量放到 js 中存储，vue 使用时加载，但可能有些变量值需要从 vue 内部获取

<template><div><el-row><template v-for="(item, index) in attrs"><el-col :span="24" :key="index">{{ item.label }}: {{ item.value }} --{{ item.name }}</el-col></template></el-row></div>
</template>
<script>
import {attrs, setAttrs} from './config'
export default {name: "Home",data() {return {name: "张三",attrs};},methods: {},
};
</script>

config.js

export const attrs = [{label: "好1",type: "input",value: "你好1",},{label: "好2",type: "input",value: "你好2",},{label: "好3",type: "input",value: "你好3",name: this.name,},
];

正常都是没问题的，但是 name 值里的 this 是 config.js 执行路径。

解决办法可以换成函数返回常量的方式

export function setAttrs(that) {return [{label: "好1",type: "input",value: "你好1",},{label: "好2",type: "input",value: "你好2",},{label: "好3",type: "input",value: "你好3",name: () => that.name,},]
}

<template><div><el-row><template v-for="(item, index) in attrs"><el-col :span="24" :key="index">{{ item.label }}: {{ item.value }} --{{ item.name && item.name() }}</el-col></template></el-row></div>
</template>
<script>
import {attrs, setAttrs} from './config'
export default {name: "Home",data() {return {name: "张三",attrs: setAttrs(this)};},methods: {},
};
</script>