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

问题描述

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

<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,1)";
      case "red": return "rgba(217,30,24,1)";
    }
  }
}

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

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

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

我们如何在 Vue3 中执行此操作？？

非常感谢。

解决方法

使用v-bind绑定动态值

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

或者你可以使用速记

:iconColor="colorLookup(status)"