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

Question

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

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

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

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

我创建了一个方法，returns 颜色的 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 中做到这一点？？

非常感谢。

Answer 1

使用v-bind绑定到动态值

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

或者您可以使用 shorthand

:iconColor="colorLookup(status)"

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

How to pass a method to string attribute of a child Component

vue-props

vuejs3