Vue.js 2中如何在div标签内为单个对象定义临时变量？

Great question! 在Vue.js 2里并没有像你设想的那种直接的指令语法来给单个嵌套对象创建临时变量，但有几种简洁的替代方案可以实现你的需求——把深层嵌套的子对象赋值为临时变量，避免在模板里反复写冗长的路径。

方案1：利用<template> + v-for遍历单元素数组 #

这是一个巧妙的小技巧：把你要引用的嵌套对象放进一个只有一个元素的数组里，用v-for遍历它，这样就能在<template>块内拿到临时变量，而且<template>不会渲染额外的DOM节点。

示例代码：

<template>
  <div>
    <!-- 用v-for遍历单元素数组，得到临时变量tempObject -->
    <template v-for="tempObject in [filter.filterBetween]">
      <div>{{ tempObject.minValue }}</div>
      <div>{{ tempObject.maxValue }}</div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        filterBetween: {
          minValue: "6",
          maxValue: "10"
        }
      }
    };
  }
};
</script>

方案2：使用计算属性提取嵌套对象 #

如果你的模板需要频繁引用这个嵌套对象，最清晰的方式是在组件里定义一个计算属性，把深层对象提取出来，模板里直接使用计算属性名即可。计算属性会自动响应原对象的变化，非常省心。

示例代码：

<template>
  <div>
    <div>{{ tempObject.minValue }}</div>
    <div>{{ tempObject.maxValue }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        filterBetween: {
          minValue: "6",
          maxValue: "10"
        }
      }
    };
  },
  computed: {
    tempObject() {
      // 返回嵌套的子对象作为临时变量
      return this.filter.filterBetween;
    }
  }
};
</script>

方案3：Vue 2.6+ 利用作用域插槽解构 #

如果你需要在组件间复用这个临时变量的逻辑，或者想把变量作用域限制在某个模板块内，可以用作用域插槽的解构功能。你可以写一个简单的无渲染组件，或者直接在当前组件内使用<slot>传递变量：

示例代码：

<template>
  <div>
    <!-- 传递嵌套对象到插槽 -->
    <slot v-bind:tempObject="filter.filterBetween"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        filterBetween: {
          minValue: "6",
          maxValue: "10"
        }
      }
    };
  }
};
</script>

<!-- 在使用插槽的地方解构出临时变量 -->
<template v-slot="{ tempObject }">
  <div>{{ tempObject.minValue }}</div>
  <div>{{ tempObject.maxValue }}</div>
</template>

总结 #

• 只是临时在一小块模板里用：优先选<template>+v-for的方案，快速简洁。
• 组件内频繁引用：用计算属性，代码可读性最高。
• 需要复用或隔离作用域：考虑作用域插槽的方式。

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