Domyślne wartości właściwości komponentu Vue i jak sprawdzić, czy użytkownik nie ustawił właściwości?

1. Jak mogę ustawić domyślną wartość właściwości komponentu w Vue 2? Na przykład istnieje prosty movieskomponent, którego można użyć w ten sposób:

<movies year="2016"><movies>



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

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

Ale jeśli użytkownik nie określi year:

<movies></movies>

wtedy komponent przyjmie domyślną wartość właściwości year.

2. Ponadto, jaki jest najlepszy sposób sprawdzenia, czy użytkownik nie ustawił właściwości? Czy to dobry sposób:

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

a może to:

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

?

Vuepozwala określić domyślną propwartość i typebezpośrednio, tworząc z właściwości obiekt (patrz: https://vuejs.org/guide/components.html#Prop-Validation ):

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

Jeśli zostanie przekazany niewłaściwy typ, wyrzuca błąd i rejestruje go w konsoli, oto skrzypce:

https://jsfiddle.net/cexbqe2q/

To stare pytanie, ale jeśli chodzi o drugą część pytania - jak sprawdzić, czy użytkownik ustawił / nie ustawił rekwizytu?

Przeprowadziliśmy inspekcję thisw ramach komponentu this.$options.propsData. Jeśli właściwość jest tutaj obecna, użytkownik jawnie ją ustawił; wartości domyślne nie są wyświetlane.

Jest to przydatne w przypadkach, gdy nie możesz naprawdę porównać swojej wartości z jej wartością domyślną, np. Jeśli prop jest funkcją.