Standaardwaarden voor Vue-componentprops & hoe controleer je of een gebruiker de prop niet heeft ingesteld?

1.Hoe kan ik de standaardwaarde voor een componentprop in Vue 2 instellen? Er is bijvoorbeeld een eenvoudig onderdeel moviesdat op deze manier kan worden gebruikt:

<movies year="2016"><movies>
Vue.component('movies', {
    props: ['year'],
    template: '#movies-template',
    ...
}

Maar als een gebruiker het yearniet opgeeft:

<movies></movies>

dan zal het onderdeel een standaardwaarde aannemen voor de yearprop.

2.Wat is ook de beste manier om te controleren of een gebruiker de prop niet heeft ingesteld? Is dit een goede manier:

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

of misschien dit:

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

?

Antwoord 1, autoriteit 100%

Met

Vuekun je een standaard prop-waarde en typedirect specificeren door van props een object te maken (zie: https://vuejs.org/guide/components.html#Prop-Validation):

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

Als het verkeerde type wordt doorgegeven, geeft het een fout en logt het in de console, hier is de viool:

https://jsfiddle.net/cexbqe2q/

Antwoord 2, autoriteit 16%

Dit is een oude vraag, maar met betrekking tot het tweede deel van de vraag: hoe kun je controleren of de gebruiker wel/niet een prop heeft ingesteld?

Als we thisbinnen de component inspecteren, hebben we this.$options.propsData. Als de prop hier aanwezig is, heeft de gebruiker deze expliciet ingesteld; standaardwaarden worden niet weergegeven.

Dit is handig in gevallen waarin u uw waarde niet echt kunt vergelijken met de standaardwaarde, bijv. als de prop een functie is.

Antwoord 3, autoriteit 2%

Ook iets belangrijks om hier toe te voegen, om standaardwaarden voor arrays en objecten in te stellen, moeten we de standaardfunctie voor rekwisieten gebruiken:

propE: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function
      default: function () {
        return { message: 'hello' }
      }
    },

Antwoord 4

Het is vermeldenswaard dat u ook een aangepaste validatorfunctie aan elke prop zoals deze kunt toevoegen, om ervoor te zorgen dat de doorgegeven waarde overeenkomt met de specifieke vereisten van uw componenten:

props: {
  year: {
    type: Number,
    required: true
    validator (value) {
      return value > 2015
    }
  }
}