如何将方法传递给子组件的字符串属性答案

【问题标题】：How to pass a method to string attribute of a child Component如何将方法传递给子组件的字符串属性
【发布时间】：2021-02-18 13:24:08
【问题描述】：

我有一个具有以下属性的组件。

<script>
  export default {
    props: {
      iconColor: {type: String, default: "currentColor"}
    },
  };
</script>

可以使用 Slot 从外部更改此属性。

...
<g :fill="iconColor"><slot /></g>

我创建了一个方法，该方法根据颜色名称返回颜色的 rgba 代码：

methods: {
  colorLookup(status) {
    switch(status): {
      case "green": return "rgba(0,230,64,1)";
      case "yellow": return "rgba(240,255,0,1)";
      case "red": return "rgba(217,30,24,1)";
    }
  }
}

我的问题是我无法将此方法传递给iconColor 属性。

传递iconColor="rgba(0,230,64,1)" 有效，但传递iconColor="{{colorLookup(status)}}" 无效。

我已经在<td>-元素中测试了该方法，该方法提供了所需的String。

我们如何在Vue3 中做到这一点？？

非常感谢。

【问题讨论】：

应该是[iconColor]="colorLookup(status)"
非常感谢您的快速回复。不幸的是，这不起作用并引发错误：Failed to execute setAttribute on Element: [iconColor] is not a valid attribute name.
对不起，很糟糕..应该是:iconColor="colorLookup(status)"

标签： vuejs3 vue-props

【解决方案1】：

使用v-bind绑定动态值

v-bind:iconColor="colorLookup(status)"

或者你可以使用速记

:iconColor="colorLookup(status)"

【讨论】：