如何解决如何将方法传递给子组件的字符串属性
<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="rgba(0,1)"
有效,但传递 iconColor="{{colorLookup(status)}}"
无效。
我已经在 <td>
元素中测试了该方法,并且该方法提供了所需的 String
。
我们如何在 Vue3
中执行此操作??
非常感谢。
解决方法
使用v-bind
绑定动态值
v-bind:iconColor="colorLookup(status)"
或者你可以使用速记
:iconColor="colorLookup(status)"
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。