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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue2はコンポーネントプロパティの双方向バインディングを実装します
  • vue.js双方向バインディングの実装原理の深い理解
  • Vue2.0はv-modelを使用して、コンポーネントプロパティの双方向バインディングの美しいソリューションを実装します。
  • Vue で双方向バインディングを実装する 4 つの方法
  • Vuejs 入門チュートリアル第1弾の詳しい解説(一方向バインディング、双方向バインディング、リストレンダリング、レスポンス機能)
  • Vue で親コンポーネントと子コンポーネント間の双方向バインディング値転送を実装する方法
  • Vue.js はデータの双方向バインディングを毎日学習する必要があります
  • AngularとVue間の双方向データバインディングの実装原理(Vueの双方向バインディングに重点を置く)
  • Vueで双方向バインディングを実装する方法
  • Vue カスタム コンポーネント v-model 双方向バインディング、親子コンポーネントの同期通信を記述する複数の方法

<<:  Elimination の JavaScript ソースコード

>>:  Vue で v-if と v-for を一緒に使用することが推奨されない理由の詳細な説明

推薦する

MySQL は information_schema オブジェクトの付与をバイパスし、ERROR 1044 (4200) エラーを報告します

この質問は、MySQL の権限に関する WeChat グループのネットユーザー間の議論です。次のよう...

サーバー間のファイル バックアップ ソリューション、サーバー ファイルを別のサーバーに自動的にバックアップする方法は?

多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...

HTML テーブル マークアップ チュートリアル (1): テーブルの作成

<br />これは 123WORDPRESS.COM が提供する一連のチュートリアルです...

フォーム内の無効なフォームフィールドの値を送信する方法 サンプルコード

フォーム内のフォーム フィールドが無効に設定されている場合、フォーム フィールドの値は送信されません...

VueはEchartsを使用して3次元棒グラフを実装します

この記事では、Echartsを使用して3次元棒グラフを実装するVueの具体的なコードを参考までに共有...

ウェブページに埋め込まれた Flash と IE、FF、Maxthon の互換性の問題

いろいろ苦労した後、インターネットで検索したり、以前の会社のプロジェクトを探したり、他の人のプロジェ...

CSS3 アニメーション ボールローリング JS コントロールアニメーション一時停止

CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...

mysql 5.6.21 のインストールと設定の詳細な手順

1. 概要MySQL バージョン: 5.6.21ダウンロードアドレス: https://dev.my...

初心者向け入門チュートリアル④:サブディレクトリのバインド方法

これが何を意味するのかを理解するには、まずサブディレクトリとは何かを知る必要があります。では、サブデ...

Vue3 を使用して虫眼鏡効果を実現する方法の例

目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. 準備2. 梱包を開始する...

シャトルボックス機能を実装するためのVueの詳細なコード

Vue - シャトルボックス機能を実装します。効果図は次のようになります。 CS 。移行{ ディスプ...

MySQLは実際に分散ロックを実装できる

序文前回の記事では、eコマース シナリオでのフラッシュ セールの例を通じて、モノリシック アーキテク...

Nginx 仮想ホストを構成する 3 つの方法 (ドメイン名に基づく)

Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮...

Linux で Hadoop クラスターをインストールするための詳細な手順

目次1. usrディレクトリにHadoopディレクトリを作成し、インストールパッケージをそのディレク...