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

139

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
}

?

PeraMika
źródło

Odpowiedzi:

231

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/

craig_h
źródło
2
A co z drugim pytaniem (jest to bardziej pytanie JavaScript): jak najlepiej sprawdzić, czy użytkownik nie ustawił właściwości? Czy to dobry sposób: if (this.year != null) a może to: if (!this.year)lub? Dzięki!
PeraMika
1
Jeśli ustawisz wartość domyślną, właściwość będzie zawsze ustawiona, chyba że ustawisz wartość domyślną na null. Jeśli to jest to, czego potrzebujesz, aby zastosować inną logikę if (this.year != null)lub if (!this.year)jest to droga do zrobienia.
craig_h
36

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ą.

aurumpotestasest
źródło