Nilai default untuk props komponen Vue & bagaimana cara memeriksa apakah pengguna tidak mengatur prop?

150

1. Bagaimana saya bisa menyetel nilai default untuk sebuah prop komponen di Vue 2? Misalnya, ada movieskomponen sederhana yang dapat digunakan dengan cara ini:

<movies year="2016"><movies>



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

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

Namun, jika pengguna tidak menentukan year:

<movies></movies>

maka komponen akan mengambil beberapa nilai default untuk yearprop.

2. Selain itu, apa cara terbaik untuk memeriksa apakah pengguna tidak menyetel prop? Apakah ini cara yang baik:

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

atau mungkin ini:

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

?

javascript vue.js vue-component PeraMika
sumber

Jawaban:

251

Vuememungkinkan Anda untuk menentukan propnilai default dan typesecara langsung, dengan menjadikan props sebagai objek (lihat: https://vuejs.org/guide/components.html#Prop-Validation ):

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

Jika jenis yang salah dilewatkan maka itu membuat kesalahan dan mencatatnya di konsol, inilah biola:

https://jsfiddle.net/cexbqe2q/

craig_h
sumber
2
Bagaimana dengan pertanyaan kedua (ini lebih banyak pertanyaan JavaScript): apa cara terbaik untuk memeriksa jika pengguna tidak menyetel prop? Apakah ini cara yang baik: if (this.year != null) atau mungkin ini: if (!this.year)atau? Terima kasih!
PeraMika
1
Jika Anda menyetel nilai default, prop akan selalu disetel kecuali Anda menyetel default ke null. Jika itu yang Anda butuhkan untuk melakukan logika lain if (this.year != null)atau if (!this.year)cara untuk pergi.
craig_h
41

Ini adalah pertanyaan lama, tetapi mengenai bagian kedua dari pertanyaan - bagaimana Anda bisa memeriksa apakah pengguna menyetel / tidak menyetel properti?

Memeriksa thisdi dalam komponen, kami punya this.$options.propsData. Jika prop ada di sini, pengguna telah mengaturnya secara eksplisit; nilai default tidak ditampilkan.

Ini berguna jika Anda tidak dapat membandingkan nilai Anda dengan defaultnya, misalnya jika prop adalah sebuah fungsi.

aurumpotestasest
sumber