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

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
}

?

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/

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.