Comment ajouter plusieurs types de données pour les accessoires VueJs?

Question

Cette erreur m'a attrapé lors de la transmission de différentes valeurs au composant.

Answer 1

Voici la solution que j'ai trouvée.

 props: {
   value: [Number, String, Array]
}

Answer 2

En général, les accessoires répertoriés comme un tableau de chaînes, si vous n'avez aucun mal de tête de type:

 props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

Si vous voulez que chaque accessoire soit un type de valeur spécifique. Dans ces cas, vous pouvez lister les accessoires en tant qu'objet, où les noms et valeurs des propriétés contiennent respectivement les noms et types d'accessoires:

 props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object
}

Si vous souhaitez utiliser plusieurs types, procédez comme suit:

 props: {
    value: [String, Number],
}

Answer 3

Comme d'autres l'ont suggéré, il existe deux façons de définir des accessoires dans vuejs:

Le premier

 //No need to define the type with this one
props: ['myVariable', 'foo', 'something']

Le deuxième

 //With this one you can define what type the prop is and other different useful things!
props: {
  myVariable: String, //You can define the type like this
  anyOfTheFollowing: String/Object/Array, //You can also define multiple possible types
  'kebab-case-like': Function, //Since vuejs is still javascript and the property 'props' is actually an object, you can define your props like this for kebab-case. You can also just use camelCase and use the kebab-case version in your template and it will still recognize it
  customOne: MyCustomType, //You can in theory use classes you've defined aswell
  foo: { //This is another way of defining props. Like an object
    type: Number,
    default: 1, //This is why this is mostly used, so you can easily define a default value for your prop in case it isn't defined
  },
  andAnotherOne: {
    type: Array,
    default: () => [], //With Arrays, Objects and Functions you have to return defaults like this since you need to return a new reference to it for it to be used
  },
  requiredOne: {
    type: Object,
    required: true //Another use for this. When it is marked as required and it isn't defined you'll get an error in the console telling you about it
  }
}

IMO J'adore la deuxième version car elle s'ouvre à bien plus et j'aime particulièrement la propriété par défaut.