Vue中如何获取函数调用的组件上下文，无需每次传递v-for循环项？

你想要的这种无需传入entry参数的写法无法直接实现，原因如下：

• Vue实例的方法、计算属性是整个组件实例共享的，没有内置机制可以自动感知当前调用来自v-for循环中的哪一个entry的上下文，不主动传参的话函数无法获取到当前循环对应的条目数据。

方案1：拆分独立子组件（最推荐） #

把循环内的组件逻辑抽成单独的子组件，将循环项entry/note作为子组件的prop传入，所有依赖该条目的逻辑、计算属性、事件处理都放在子组件内部实现：
父组件模板直接简化为：

<div v-for="entry in entries" :key="entry.id">
  <my-component :entry="entry" />
</div>

对应的MyComponent子组件实现：

<template>
  <div :color="color">hello</div>
</template>
<script>
export default {
  props: ['entry'],
  computed: {
    // 直接用内部prop，不需要额外传参
    color() {
      return this.entry.color
    }
  }
}
</script>

针对你提到的q-editor场景，抽成子组件后父模板可以完全去掉重复传参的样板代码，子组件内部自行处理所有note相关的逻辑即可。

方案2：返回函数的计算属性（不改变现有结构的轻量优化） #

如果不想拆组件，可以把方法改成返回函数的计算属性，虽然还是需要传参，但相比普通methods有更好的缓存效果，性能更优：

<!-- 模板还是需要传参，但函数是缓存的 -->
<div v-for="entry in entries" :key="entry.id">
  <my-component :color="doSomething(entry)">hello</my-component>
</div>

computed: {
  doSomething() {
    return entry => entry.color
  }
}

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