Provide a way to define different name for prop attribute

[davletovalmir]

What problem does this feature solve?

In most of cases, it's not really comfortable to use initialProp as prop name, for example, or have normalizedProp inside a component, which takes some passed prop and transforms it. Code looks bloated and reminds more workaround than a good solution.

Having ability to change attribute name of prop would be great. Something like:

rawProp: { attributeName: "prop" }

What does the proposed API look like?

<component size="md"> ... </component>

computed: {
  size: {
    switch (this.rawSize) { ... } // returns something in case blocks
  }
},
props: {
  rawSize: {
    attributeName: "size",
    type: String
  }
}

Thus, using any of proposed solutions above, this.size inside component would return transformed value (for example, h4 or just 4).

I believe having this feature would be very awesome and help us to write cleaner code.

[hatashiro]

I'm interested in this feature too. Is this feature confirmed to be implemented? I'm willing to work on this.

Edit:

I'm currently now working on this, please feel free to jump in.

[panhaoyu]

Besides, there's also another enhancement about props.

Here's a simple code.

props:{
  size: {
    type: Number,
  }
}

And here's a parent component:

<parent>
  <child size="1"></child>
</parent>

We know it's a wrong usage, but I think, now that we provided the field type, we can call Number(value) to change it's type?

After seeing this issue, I think maybe my choice can be a default function of his transform function.

[posva]

Regarding the transform, it's basically coerce from Vue 1 and it was removed. The feature request is about having different name locally for a prop but the transform feature has been asked many times already (#2218, #7657) and it's achievable in userland: https://github.com/posva/vue-coerce-props.

[davletovalmir]

@posva, I've updated FR description.

[codebryo]

To give this some life again, I am also very much interested regarding this feature. I would though call it propName to stay in line with it being props:

props: {
  rawSize: {
    propName: 'size',
    type: Number,
    default: 1,
  }
}

[fjc0k]

Here is a Vue mixin (fjc0k/vue-messenger) including a series of useful enhancements to Vue components props:

• Transform props
• Enum-type props
• Numeric-type props
• Listen for receiving props
• Two-way data binding props

Hope this helps.

[jbieliauskas]

It's been a while, but I'm going to bring it up again, what's the status of this feature request? Is it confirmed or already implemented?

The proposed (fjc0k/vue-messenger) does not solve the issue. Again, we simply want an alias to prop names, so we wouldn't have to write initialThis, initialThat all the time.

I'm willing to work on this feature, is it confirmed/implemented?

[pdcmoreira]

I'm also very interested in this. I just have something to point out:
Currently we look at props as being a component's documentation. An alias would be just for internal use.
Wouldn't it be better if aliases were a separate option? Something like:

export default {
    props: {
        size: {
            type: Number,
            default: 100
        },

        position: {
            type: Object,
            default: () => ({ x: 0, y: 0 })
        }
    },

    aliases: {
        initialPosition: 'position'
    }
}

This way, props are kept with just the information the caller needs, nothing more.

[posva]

Not really because it's part of the prop definition so it belongs in one property. Documentation tools can still skip it

[hrobertson]

It seems to me that this would be preferable:

props: {
  size: {
    type: String,
    alias: "rawSize"
  }
}

Rather than this:

props: {
  rawSize: {
    type: String,
    propName: "size"
  }
}

The external facing prop name should remain as the key in the props object regardless of whether an alias is set or not. Adding an alias for internal use should simply require the addition of a property to that prop spec, not changing the property key.

Here is an example of an existing size prop which the develop later wants to alias within this component:

Original proposal:

props: {
  size: {
    type: String
  }
}

gets changed to:

props: {
  rawSize: {
    type: String,
    propName: "size"
  }
}

My suggestion:

props: {
  size: {
    type: String
  }
}

gets added to:

props: {
  size: {
    type: String,
    alias: "rawSize"
  }
}