Vue のデータフローは一方向ですか?

は一方通行です。 Vue には双方向のバインディング「v-model」がありますが、Vue の親コンポーネントと子コンポーネント間のデータ転送は依然として一方向のデータ フローに従います。親コンポーネントは子コンポーネントに props を渡すことができますが、子コンポーネントはプロパティを変更できません親コンポーネントによって渡されるプロパティ。子コンポーネントは、イベントを通じて親コンポーネントにデータ変更を通知することしかできません。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

Vue は一方向のデータ フローであり、データ フローの方向は上から下、親コンポーネントから子コンポーネントへです。

Vue の双方向データ バインディングと混同しないでください。双方向データ バインディングは、データのフロー関係ではなく、ビューとテンプレートの間のレンダリング関係を指します!

Vue の親コンポーネントと子コンポーネント間のデータ転送は、一方向のデータ フローに従います。親コンポーネントは props を子コンポーネントに渡すことができますが、子コンポーネントは親コンポーネントによって渡された props を変更できません。子コンポーネントは通知のみを行うことができます。データの親コンポーネントはイベントを通じて変化します。

1、一方向データ フロー:

すべてのプロップは、親プロップと子プロップの間で一方向の下向きバインディングを形成します。親プロップの更新はフローになります。子コンポーネントにダウンしますが、その逆はありません。これにより、子コンポーネントが親コンポーネントの状態を誤って変更して、アプリケーションのデータ フローが理解しにくくなるのを防ぐことができます。

さらに、親コンポーネントが変更されるたびに、子コンポーネント内のすべてのプロパティが最新の値に更新されます。これは、子コンポーネント内の props を変更すべきではないことを意味します。これを行うと、親コンポーネントの状態も変更されます。

2、Prop は参照によって渡されます:

JavaScript では、オブジェクトと配列は参照によって渡されることに注意してください。そのため、配列またはオブジェクト型の場合は props です。 、子コンポーネント内のオブジェクトまたは配列自体を変更すると、親コンポーネントの状態に影響します。

#Vue の一方向データ フローについての深い理解

#1. v-model は入力要素で使用されます

v-model 使用すると双方向バインディングによく似ていますが (実際には...)、Vue は単一のデータ フローであり、v-model は単なる糖衣構文です。 code は、実際には行の 2 番目の構文糖衣にすぎません。コードの 2 行目は次のように省略できます:

<input v-model="something" />
<input v-bind:value="something" v-on:input="something = $event.target.value" />

このコード行を理解するには、まず入力要素自体に oninput イベントがあることを知る必要があります。これは HTML5 に新しく追加されたもので、同様です入力ボックスの内容が変更されるたびに、oninput がトリガーされ、最新の値が $event を通じて何かに渡されます。

構文糖衣と元の構文の 2 行のコードを注意深く観察すると、次の結論を導き出すことができます。 v-model 属性を input 要素に追加するとき、その値はデフォルトで要素の属性が設定され、その後、「input」イベントがリアルタイム値転送のトリガー イベントとして使用されます

2. v-model はコンポーネントで使用されます

v-modelは入力だけでなくコンポーネントでも使用できますので、公式サイトのデモをご覧ください。

<input :value="something" @input="something = $event.target.value" />

これら 2 つの質問に対する答えがわかった場合は、v-model を完全にマスターできたことおめでとうございます。理解できない場合は、次のコードを見てください:

<currency-input v-model="price"></currency-input>
Vue.component(&#39;currency-input&#39;, {
  template: &#39;\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  &#39;,
  props: [&#39;value&#39;], // 为什么这里要用 value 属性，value在哪里定义的？
  methods: {
    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
    updateValue: function (value) {
      var formattedValue = value
        // 删除两侧的空格符
        .trim()
        // 保留 2 位小数
        .slice(
          0,
          value.indexOf(&#39;.&#39;) === -1
            ? value.length
            : value.indexOf(&#39;.&#39;) + 3
        )
      // 如果值尚不合规，则手动覆盖为合规的值
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通过 input 事件带出数值
      // <!--为什么这里把 &#39;input&#39; 作为触发事件的事件名？`input` 在哪定义的？-->
      this.$emit(&#39;input&#39;, Number(formattedValue))
    }
  }
})

したがって、v-model 属性をコンポーネントに追加すると、その値がデフォルトでコンポーネントの属性として使用され、イベントをコンポーネントにバインドするときに「input」値がイベント名として使用されます。これは、コンポーネントを作成する場合に特に便利です。

3. v-model の欠点と解決策

チェック ボックスやラジオ ボタンなどの一般的なコンポーネントを作成する場合、v-model は使いにくいです。

<currency-input v-model="price"></currency-input>
所以在组件中使用时，它相当于下面的简写：
//上行代码是下行的语法糖
<currency-input :value="price" @input="price = arguments[0]"></currency-input>

v-model は、value 属性と oninput イベントを提供します。ただし、必要なのは value 属性ではなく、checked 属性であり、このラジオ ボタンをクリックしても oninput イベントはトリガーされません. 、onchange イベントのみをトリガーします。

v-model は入力要素でのみ使用されるため、この状況は簡単に解決できます:

<input type="checkbox" v-model="something" />

v-model がコンポーネントで使用される場合:

<input type="checkbox" :checked="value" @change="change(value, $event)"

Vue バージョン 2.2 では、コンポーネントを定義するときにモデル オプションを使用して prop/event をカスタマイズできます。

4. Vue コンポーネントのデータ フロー

上記の v-model の分析から、双方向のデータ バインディングが一方向のバインディングに基づいていることがわかります。 Change(input) イベントは入力要素 (input、textare など) に追加され、モデルとビューを動的に変更します。つまり、親コンポーネントのイベントをトリガー ($emit) して mv を変更し、効果を実現します。 MVVMの。 Vue コンポーネント間のデータ転送は一方向です。つまり、データは常に親コンポーネントから子コンポーネントに渡されます。子コンポーネントは内部で独自のデータを保持できますが、データを変更する権限はありません。開発時 ユーザーがこれを実行しようとすると、vue はエラーを報告します。これは、コンポーネント間の分離を改善するために行われます。開発中、親コンポーネントの特定のデータに依存する複数のサブコンポーネントが存在する場合があります。サブコンポーネントが親コンポーネントのデータを変更できる場合、サブコンポーネントの変更はこのデータに依存するすべてのデータをトリガーします。子コンポーネントが変更されるため、 Vue では、子コンポーネントが親コンポーネントのデータを変更することを推奨していません。props を直接変更すると警告がスローされます。フローチャートは次のとおりです。

したがって、子コンポーネントの props を変更したい場合は、子コンポーネントを親コンポーネントとして使用します。これにより、

• 1 があり、ローカル変数を取得し、prop の値で初期化します。
• 2. 計算されたプロパティを定義し、プロパティ値を処理して返します。

[関連する推奨事項: vuejs ビデオ チュートリアル、Web フロントエンド開発]

以上がVue のデータフローは一方向ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。