[Vuejs]-Declaring props in array vs array of objects

by

3👍

✅

Downside is of course less safety.

Does vue determine the type of each property by itself? No

When providing array of strings, Vue does not validate the type of passed props at all so in case of incorrect usage (which is much more likely to happen as other devs/future you are not able to tell what should be passed in without reading the rest of component’s code) you end up with some runtime error somewhere in your component instead of clean error/warning about wrong value passed as prop (or a sensible error from your IDE)

You should use as much specific props definition as possible most of the time.

👤Michal Levý

3👍

Well it’s not just type declaration.

It is a prop validation feature.
The complete syntax is

const props = defineProps({
    name: String,
    id: [ Number, String ],
    style: {
        type: Object,
        default: ()=>{
            color: "red",
            bg-color: "white"
        },
        validator: function (value) {
            return ['red', 'blue', 'green'].includes(value.color)
        }
    },
})

So the downside of using just the named props is:

  1. No type safety. But even in case of typed props it will only show console warning in development build.

Whereas the advantage of using prop definition is

  1. Multiple types for single prop
  2. Default value for a prop
  3. Custom validator function
👤Alpesh Patil

Leave a comment