vue.js の Props (一方向データ フロー) についての簡単な説明

prop は一方向のバインディングです。親コンポーネントのプロパティが変更されると、その変更は子コンポーネントに送信されますが、その逆は行われません。これは、子コンポーネントが親コンポーネントの状態を不注意に変更することを防ぐためです。これにより、アプリケーションのデータ フローが理解しにくくなります。

さらに、親コンポーネントが更新されるたびに、子コンポーネントのすべての props が最新の値に更新されます。これは、子コンポーネント内の props を変更すべきではないことを意味します。これを行うと、Vue はコンソールで警告を出します。

通常、prop が変更される状況は 2 つあります。

1. prop は初期値として渡され、サブコンポーネントは単にその初期値を初期値として使用します。 ;

2. prop は、変換する必要がある元の値として渡されます。

より正確には、これら 2 つの状況は次のとおりです:

1. ローカル データ属性を定義し、prop の初期値をローカル データの初期値として使用します。

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

2. prop の値から計算される計算属性を定義します。

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

JavaScript では、オブジェクトと配列は参照型であり、同じメモリ空間を指していることに注意してください。prop がオブジェクトまたは配列の場合、子コンポーネント内でそれを変更すると、親コンポーネントの状態に影響します。

英語の元のアドレス: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

##関連する推奨事項:

2020 年のフロントエンド vue インタビューの質問の概要 (回答付き)

#vue チュートリアルの推奨事項: 2020 年最新の 5 つの vue.js ビデオ チュートリアルの選択

プログラミング関連の知識については、

プログラミング入門

をご覧ください。 ！

以上がvue.js の Props (一方向データ フロー) についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。