web-dev-qa-db-ja.com

Vueコンポーネントの小道具のデフォルト値＆ユーザーが小道具を設定していないかどうかを確認する方法？

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

<movies year="2016"><movies>



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

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

しかし、ユーザーがyearを指定していない場合：

<movies></movies>

そうすると、コンポーネントはyearプロップにデフォルト値を取ります。

2。また、ユーザーがプロップを設定していないかどうかを確認するための最良の方法は何ですか？これは良い方法ですか。

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

または多分これ：

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

？

javascriptvue.jsvue-component
95
PeraMika

Vueを使用すると、小道具をオブジェクトにすることで、デフォルトのprop値およびtypeを直接指定できます（ https://vuejs.org/guide/components.html#Prop-Validation を参照）。 ：

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

間違った型が渡されると、エラーをスローしてコンソールに記録します。

https://jsfiddle.net/cexbqe2q/

173
craig_h

これは古い質問ですが、質問の後半部分についてです。ユーザーがプロップを設定したかどうかをどうやって確認できますか。

コンポーネント内のthisを調べると、this.$options.propsDataがあります。支柱がここにある場合は、ユーザーが明示的に設定しています。デフォルト値は表示されません。

これは、あなたが自分の値をデフォルト値と本当に比較できない場合に便利です。支柱が関数の場合.

21
aurumpotestasest