vue.js - 如何获取调用函数的组件？

Question

考虑 <template> 中的以下片段:

<div v-for="entry in entries">
  <my-component :color="doSomething(entry)">hello</my-component>
</div>

相关方法:

doSomething(entry) {
  return entry.color
}

有没有办法用计算属性替换上面的设置，而不需要传递 (entry)每次？像这样的东西:

<div v-for="entry in entries">
  <my-component :color="doSomething">hello</my-component>
</div>

相关方法:

doSomething() {
  // I need to know here that the call is coming from <my-component> 
  // in the context of "entry"
  return ???.color
}

问题的原因是我想减少依赖迭代属性状态的组件的样板:

      <q-editor
          v-for="note in notesByDay[when]"
          @click="noteClicked(note)"
          @blur="noteBlurred(note)"
          :toolbar="SetToolbar(note)"
          (...)

Answer 1

计算的 props 无法接收参数，除非它们本身就是计算方法，但这并不比在原始问题中使用组件方法更好。

您可以使用 Array.prototype.map 来计算添加了 color 字段的数组。在 entries[] 上，您可以访问 entry 字段:

export default {
  computed: {
    computedEntries() {
      return this.entries.map(entry => ({
        ...entry,
        color: this.getColor(entry),
      }))
    }
  },
  methods: {
    getColor(entry) {
      return /* determine color based on state, etc. */
    }
  },
}

然后在模板中，循环计算的 prop 而不是 entries:

<template>
  <div v-for="entry in computedEntries">
    <my-component :color="entry.color">hello</my-component>
  </div>
</template>