Vueカスタムコンポーネントは双方向バインディングを実装します

シナリオ：

一般的に使用される親コンポーネントと子コンポーネント間の相互作用方法は次のとおりです。
親コンポーネントは、props を通じて子コンポーネントにデータを流します。
子コンポーネントは、更新された配列を $emit 経由で親コンポーネントに送信します。

今日は、入力ボックスの v-model を参照して、カスタム コンポーネントの双方向データ バインディングを実装し、別の方法でインタラクションを実装します。
つまり、親コンポーネントの値が変化すると、子コンポーネントの値もそれに応じて変化し、逆に子コンポーネントの値が変化すると、親コンポーネントの値もそれに応じて変化します。

サブコンポーネントの定義:

props 属性値を直接変更することはできないため、ここで valueData を定義し、listen によってリアルタイムで値を受け取り、click メソッドを通じて valueData を変更します。
モデル構文の sugar prop は受信した props 属性値であり、一貫性を保つ必要があることに注意してください。 event は、先ほど渡されたイベントの名前です。

コードは次のとおりです。

<テンプレート>
  <div>
    <div>{{ `サブコンポーネントの値: ${value}` }}</div>
    <div @click="click">値を変更するにはここをクリック</div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前： ""、
  モデル： {
    プロパティ: "値",
    イベント: 「変更」
  },
  小道具: {
    値: 数値
  },
  コンポーネント: {},
  データ（） {
    戻る {
      値データ: ""
    };
  },
  時計：
    値(新しい値、古い値) {
      this.valueData = 新しい値;
      console.log(`サブコンポーネントの値: ${newValue}`);
    }
  },
  作成された() {
  },
  マウント() {
  },
  メソッド: {
    クリック（） {
      this.valueData++;
      this.$emit("change", this.valueData);
    }
  }
};
</スクリプト>
<style lang='less' スコープ>
</スタイル>

親コンポーネントの定義:

親コンポーネントは、v-model を通じてテキスト値をバインドします。名前は必ずしも値である必要はなく、命名規則に準拠する他の文字列にすることができます。ここではテキストです。
子コンポーネントが変更イベントを通じてデータを更新すると、それに応じて v-mode バインディング値が変更されます。
または、親コンポーネントがテキスト値を変更すると、子コンポーネントの値もそれに応じて変更されます。

コードは次のとおりです。

<テンプレート>
  <div>
    <div>{{ `親コンポーネントの値: ${text}` }}</div>
    <div @click="click">値を変更するにはここをクリック</div>


    <span>---------------------------------------------------------</span>

    <テストの子供 v-model="テキスト"></テストの子供>

  </div>
</テンプレート>

<スクリプト>
「@/views/TestChildren」からTestChildrenをインポートします。

エクスポートデフォルト{
  名前： ""、
  コンポーネント: { TestChildren },
  データ（） {
    戻る {
      テキスト 1
    };
  },
  作成された() {
  },
  マウント() {
  },
  時計：
    テキスト(新しい値、古い値) {
      console.log(`親コンポーネントの値: ${newValue}`);
    }
  },
  メソッド: {
    クリック（） {
      this.text--;

    }
  }
};
</スクリプト>
<style lang='less' スコープ>
</スタイル>

結果：

テストのためにコードを自分のプロジェクトに直接コピーします。値が親コンポーネントによって変更されるか、子コンポーネントによって変更されるか。 v-mode によってバインドされた 2 つのコンポーネントの値は常に一貫しています。

質疑応答:

クラスメートが尋ねました。これは、props を通じてデータを下向きに流し、次に $emit を通じてデータを上向きに渡すのと同じではないですか? 私のように双方向バインディングの効果も実現できます。 実際、v-model を使用しない場合、親コンポーネントに次のコードを記述することになります。

<テストの子供 @change="changeText"></テストの子供>

次に、changeText メソッドを定義してテキスト値を変更します。

ページがより複雑になり、参照されるコンポーネントの数が多くなると、ページ内にこのようなメソッドを 10 個または 20 個以上定義する必要があると想像してください。読み取り可能な行数が大幅に減少し、メンテナンスコストが増加します。

拡張機能:

vue2.3以降では、双方向バインディングも実現できるsyncメソッドが提供されています。

親コンポーネントでの記述:

<テストの子:value.sync="テキスト"></テストの子>

次のモデル定義はサブコンポーネントでは必要ないので、削除してください。

モデル： {
プロパティ: "値",
イベント: 「変更」
},

親コンポーネントにデータを渡すには、次のメソッドを使用します。

this.$emit("update:value", this.valueData);

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。