vue：在其定义中转换一个道具

Posted 2023-02-23

【中文标题】vue：在其定义中转换一个道具

【英文标题】：vue: transforms a prop in its definition

【发布时间】：2018-03-17 07:55:21

【问题描述】：

我有一个组件，它是一个带有图标之类的东西的按钮。我是这样使用的：

<ti-btn icon="..." @click.native="..."></ti-btn>

另外，我可以传递一个不需要的 prop，这个 prop 是 size，它是一个数字。

<ti-btn icon="..." size="32" @click.native="..."></ti-btn>

现在，在我的组件定义中，起初我写道：

<template>
   <i :class="icon" :style="fontSize"></i>
</template>
<script>
export default 
    props: ['icon', 'size'],
    computed: 
       fontSize() 
           return this.size ? `$this.sizepx` : DEFAULT_SIZE;
       
   

</script>

如果大小没有传下来，我设置默认值。这是可行的，但根据良好实践和 vue 风格指南，Prop 定义应尽可能详细。于是，我开始用这种方式：

props: 
    icon: 
        type: String,
        required: true,
        validate(value)
            //some kind of validation here
            return value.includes('ti')
        
    ,
    size: 
        type: Number,
        required: false,
        default: DEFAULT_SIZE
    

size prop 接收一个 Number，但是，它必须返回一个字符串，实际上 DEFAULT_SIZE 设置为“24px”，这是一个String，同样，接收的值转换为value+"px"。所以，我的问题是，如何在自己的定义对象中转换 size 属性，而不使用计算属性？

【问题讨论】：

我不认为你可以：props 仅作为一个接口来规定可以传入哪些参数/参数，以及可接受的类型/形式是什么.它不用于转换传入数据。您将不得不依赖字符串插值，无论是作为计算道具还是在模板本身中。我会说您应该将DEFAULT_SIZE 设置为数字，以保持一致性，并计算/插入实际像素大小。

计算属性是这里的正确方法。

【参考方案1】：

正如 Terry 在 cmets 中提到的，不可能提供一种方法来转换 prop 的值，该值从 prop 的定义本身传递给组件。

您可以让size 只是一个Number，然后在绑定到style 时添加'px'：

<i :class="icon" :style=" fontSize: `$sizepx` "></i>

这意味着您需要使DEFAULT_SIZE 等于24。

---

如果您无法更改DEFAULT_SIZE 的值。那么您的 fontSize 计算属性示例是处理该问题的正确方法。