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 を一緒に使用することが推奨されない理由の詳細な説明

推薦する

HTML_PowerNode 入門 Java アカデミー

HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 HTML ...

HTML から PDF への変換事例の概要 (複数の画像を推奨)

仕事の都合上、最近 HTML を PDF に変換する機能について調べることに時間を費やしました。 H...

CentOS の MySQL に MariaDB をインストールするときに発生する方法と問題

以前にインストールしたmariadbを削除する1. rpm -qa | grep mariadb を...

実行後にdocker nginxにアクセスできない問題の解決策

## 1最近、docker デプロイメントを学習しており、当初は nginx を docker 化す...

JS関数のカリー化の詳細な説明

目次1. 補足知識ポイント: 関数の暗黙的な変換2. 補足知識: call/apply を使って配列...

Dockerはイメージ名とTAG操作の名前を変更します

docker イメージを使用する場合、以下に示すように、REPOSITORY と TAG の両方が ...

訪問者にあなたのウェブサイトを覚えてもらうための3つの便利なコード

訪問者があなたのウェブサイトを覚えておくのに役立つ3つの便利なコード。お気に入りに追加するためのヒン...

JSは10進数を16進数に変換するサンプルコードを実装します

序文コードを書くと、時々基数変換の問題に遭遇します。一般的な変換には、2進数、8進数、10進数、16...

Vue の計算プロパティとリスナーの使用の概要

1. 計算プロパティとリスナー1.1 計算プロパティ <!DOCTYPE html> &...

JavaScript の querySelector メソッドと getElementById メソッドの違いを分析する

目次1. 概要1.1 querySelector() と querySelectorAll() の使...

CSSを使用してTDのINPUTの幅を設定する

最近、C# を使用して Web プログラムを作成していたときに、次のような問題が発生しました。 Te...

MySQL データベースの最適化: テーブルとデータベースのシャーディング操作の詳細な説明

この記事では、例を使用して、MySQL データベースの最適化のためのテーブルおよびデータベース シャ...

この構成ファイルの排他ロックに失敗したという VMware 仮想マシンのプロンプトの解決方法

VMware が異常シャットダウンした後、再起動すると「この構成ファイルを排他的にロックできませんで...

MySQLにおけるトランザクションの永続性実装原理の詳細な説明

序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...

ウェブデザインにおける2種類のタブアプリケーション

現在、Web デザインではタブが広く使用されていますが、一般的に次の 2 つのタイプに分けられます。...