如何将对象属性路径存入变量并在代码与模板中正常调用？

你遇到的核心问题是：JavaScript 里用方括号访问对象时，obj['a.b.c'] 和 obj.a.b.c 的逻辑完全不同——前者是把整个字符串当作单个键名查找，而后者是逐层访问嵌套的属性。所以你直接用 this.appProps[this.propBasePath]，其实是在找 appProps 里有没有一个叫 header.label.lacales 的直接属性，而非逐层访问 header → label → lacales。

下面给你几个实用的解决方案：

1. 写一个通用的路径解析函数 #

可以封装一个工具函数，把路径字符串按点分割，逐层遍历对象获取属性：

// 定义在组件的 methods 或者单独的工具文件里
getNestedProp(obj: any, path: string) {
  // 把路径拆分成单个键名，逐层遍历
  return path.split('.').reduce((currentLayer, key) => {
    // 用可选链避免中间层级不存在时报错
    return currentLayer?.[key];
  }, obj);
}

然后在代码里这样用：

// 注意这里直接写静态路径字符串，不需要模板字符串（除非你要动态拼接路径）
propBasePath: string = 'header.label.lacales';

// 赋值后获取目标属性
this.appProps = value;
const targetLocale = this.getNestedProp(this.appProps, this.propBasePath)?.['th_TH'];
console.log(targetLocale); // 现在就能正常输出了

2. 在 Vue 模板中使用的方案 #

模板里无法直接解析字符串路径，你可以把逻辑放到计算属性或者方法里：

<template>
  <h1 style="font-size: 3rem">{{ thaiLabel }}</h1>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const appProps = ref({}); // 你的数据对象
const propBasePath = ref('header.label.lacales');

// 用计算属性封装逻辑
const thaiLabel = computed(() => {
  return getNestedProp(appProps.value, propBasePath.value)?.['th_TH'];
});

function getNestedProp(obj: any, path: string) {
  return path.split('.').reduce((current, key) => current?.[key], obj);
}
</script>

额外注意事项 #

• 你最初写的 ${header.label.lacales} 是模板字符串，如果 header 不是当前作用域的变量，应该直接写静态字符串 'header.label.lacales'，否则会抛出变量未定义的错误。
• 用可选链操作符 ?. 可以避免路径中某个层级不存在时抛出错误，让代码更健壮。

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