1. ホーム
  2. javascript

[解決済み] Vueコンポーネントのpropのデフォルト値と、ユーザーがpropを設定しなかったかどうかを確認する方法は?

2022-04-21 07:21:52

質問

1. Vue 2でコンポーネントのプロップにデフォルト値を設定するにはどうすればよいですか?例えば、単純な movies コンポーネントは、このように使用することができます。

<movies year="2016"><movies>



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

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

しかし、もしユーザーが year :

<movies></movies>

を指定すると、コンポーネントは year プロパティを指定します。

2. また、ユーザがpropを設定しなかったかどうかを確認する最善の方法は何でしょうか?これは良い方法なのでしょうか。

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

とか、これかな。

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

?

どのように解決するのか?

Vue を指定することで、デフォルトの prop 価値と type を直接、propsをオブジェクトにすることで、(参照。 https://vuejs.org/guide/components.html#Prop-Validation ):

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

もし間違った型が渡されたら、エラーを投げてコンソールにログを残します。

https://jsfiddle.net/cexbqe2q/