Valori predefiniti per i puntelli dei componenti Vue e come verificare se un utente non ha impostato il puntello?


139

1. Come posso impostare il valore predefinito per un oggetto componente in Vue 2? Ad esempio, esiste un moviescomponente semplice che può essere utilizzato in questo modo:

<movies year="2016"><movies>



Vue.component('movies', {
    props: ['year'],

    template: '#movies-template',
    ...
}

Ma, se un utente non specifica year:

<movies></movies>

quindi il componente avrà un valore predefinito per il yearprop.

2. Inoltre, qual è il modo migliore per verificare se un utente non ha impostato il prop? È un buon modo:

if (this.year != null) {
    // do something
}

o forse questo:

if (!this.year) {
    // do something
}

?

Risposte:


231

Vueti permette di specificare un propvalore predefinito e typedirettamente, creando oggetti di scena (vedi: https://vuejs.org/guide/components.html#Prop-Validation ):

props: {
  year: {
    default: 2016,
    type: Number
  }
}

Se viene passato il tipo sbagliato, genera un errore e lo registra nella console, ecco il violino:

https://jsfiddle.net/cexbqe2q/


2
Che dire della seconda domanda (questa è una domanda più JavaScript): qual è il modo migliore per verificare se un utente non ha impostato il prop? È un buon modo: if (this.year != null) o forse questo: if (!this.year)o? Grazie!
PeraMika,

1
Se si imposta un valore predefinito, l'elica verrà sempre impostata a meno che non si imposti il ​​valore predefinito su null. Se questo è ciò di cui hai bisogno per eseguire qualche altra logica if (this.year != null)o if (!this.year)è la strada da percorrere.
craig_h

36

Questa è una vecchia domanda, ma per quanto riguarda la seconda parte della domanda: come puoi verificare se l'utente ha impostato / non impostato un oggetto?

Ispezionando thisall'interno del componente, abbiamo this.$options.propsData. Se il prop è presente qui, l'utente lo ha impostato esplicitamente; i valori predefiniti non vengono visualizzati.

Questo è utile nei casi in cui non puoi davvero confrontare il tuo valore con il suo valore predefinito, ad esempio se il prop è una funzione.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.