Giá trị mặc định cho đạo cụ thành phần Vue & cách kiểm tra xem người dùng không đặt prop?

1. Làm cách nào tôi có thể đặt giá trị mặc định cho prop thành phần trong Vue 2? Ví dụ, có một moviesthành phần đơn giản có thể được sử dụng theo cách này:

<movies year="2016"><movies>



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

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

Nhưng, nếu người dùng không chỉ định year:

<movies></movies>

sau đó thành phần sẽ lấy một số giá trị mặc định cho yearprop.

2. Ngoài ra, cách tốt nhất để kiểm tra xem người dùng không đặt prop là gì? Đây có phải là một cách tốt:

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

hoặc có thể thế này:

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

?

Vuecho phép bạn chỉ định một propgiá trị mặc định và typetrực tiếp, bằng cách đặt đạo cụ thành một đối tượng (xem: https://vuejs.org/guide/components.html#Prop-Validation ):

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

Nếu loại sai được thông qua thì nó sẽ báo lỗi và ghi lại nó trong bảng điều khiển, đây là câu đố:

https://jsfiddle.net/cexbqe2q/

Đây là một câu hỏi cũ, nhưng liên quan đến phần thứ hai của câu hỏi - làm thế nào bạn có thể kiểm tra xem người dùng có đặt / không đặt chỗ dựa không?

Kiểm tra thistrong thành phần, chúng tôi có this.$options.propsData. Nếu prop có mặt ở đây, người dùng đã thiết lập rõ ràng; giá trị mặc định không được hiển thị.

Điều này hữu ích trong trường hợp bạn thực sự không thể so sánh giá trị của mình với giá trị mặc định, ví dụ: nếu prop là một hàm.