Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法

Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法

みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法についてお話します。

1: シンプルバージョンのコードは次のとおりです。

親コンポーネント:

<テンプレート>
  <div>
  // 3: 子コンポーネントを使用し、v-model を使用して <About v-model="father"/> をバインドします。
  </div>
</テンプレート>

<スクリプト>
// 1: サブコンポーネントをインポートします。import About from "./About";
エクスポートデフォルト{
// 2: サブコンポーネントを登録する: {
    について、
  },
  データ() {
      戻る {
      // 空の父親の値:''
      }
  },
  //コンポーネントデータの変更を監視する watch:{
      父(val){
          コンソールログ(val);
      }
  }
};
</スクリプト>

サブコンポーネント:

<テンプレート>
  <div>
  // 2: v-model を使用して <input type="text" v-model="son"> をバインドします。
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    // 1: 親コンポーネントから情報プロパティを受け取る: {
        価値:{
            タイプ:文字列、
            デフォルト:''
        }
    },
    データ() {
        戻る {
        // 3: 空の値を代入する:''
        }
    },
    // 4: 変更をリッスンする watch:{
        // 息子に値を割り当てる   
        価値(){
        // ここで this.value は props の値です
            this.son = this.value
        },
        // 親コンポーネントにsonを渡すson(){
            this.$emit('input',this.son)
        }
    }
}
</スクリプト>

子コンポーネントが親コンポーネントに渡されるときに $emit の最初のパラメータが 'input' である理由については、興味のある方は v-model 実装の原則について学ぶことができます。

2: プロジェクト内での使用に移りましょう(子コンポーネントの画像アドレスを取得し、親コンポーネントに渡し、画像情報を同期的に更新します)

基本的に同じ

Ⅰ: 親コンポーネントに子コンポーネントを導入し、子コンポーネントタグでv-modelを使用して空の値を割り当てる
(UploadImg タグはインポートされたサブコンポーネントです)

Ⅱ: 次に、props を使用して子コンポーネントで受け取ります。

III: サブコンポーネントページでも v-model を使用し、データに空のイメージを割り当てます。

IV: サブコンポーネントの変更を監視するためにwatchを使用する

分解図のコード:

value 関数は、渡された親コンポーネントを子コンポーネントに割り当てます。This.value は props の値です。

価値() {
      this.SonStaffPhoto = this.value
      console.log(this.SonStaffPhoto)
    }

これはv-modelにバインドされた子コンポーネント関数であり、親コンポーネントに渡すために使用されます。

息子スタッフ写真() {
      this.$emit('input', this.SonStaffPhoto)
    },

この時点で、親コンポーネントに渡したいコンテンツを this.SonStaffPhoto に割り当てることができます(画像アドレスを格納する変数に割り当てました)

V: 親コンポーネントの変更を監視することもできます。

親コンポーネントの This.staffPhoto にも、バインドするコンテンツを割り当てることができます (子コンポーネントの画像が更新され、親コンポーネントも同期的に更新されるように、最新の画像変数に割り当てました)

要約する

これで、Vue で v-model を使用したクロスコンポーネントバインディングの基本的な実装方法についての記事は終了です。Vue で v-model を使用したクロスコンポーネントバインディングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • v-model 双方向バインディングデータを実装する vue カスタム コンポーネントのサンプル コード
  • vue3 コンポーネントでの v-model の使用と詳細な説明
  • Vue の v-model ディレクティブと .sync 修飾子の違いの詳細な説明
  • Vue の双方向イベントバインディング v-model の原理についての簡単な説明
  • Vueはv-modelを使用してel-paginationコンポーネントのプロセス全体をカプセル化します。
  • Vue で親子コンポーネントの値を双方向バインドするために v-model を使用するときに発生する問題と解決策
  • Vue フォーム入力ボックスがフォーカスおよびぼかしイベントをサポートしていない問題の解決策
  • カスタムイベントを使用した Vue のフォーム入力コンポーネントの詳細な使用方法 [日付コンポーネントと通貨コンポーネント]
  • Vue フォーム入力バインディングのサンプルコード
  • Vue フォームの入力フォーマットの中国語入力方法の異常
  • Vue フォーム入力バインディング v-model

<<:  mysqlは昨日の日付、今日の日付、明日の日付、前の時間と次の時間の時刻を取得します

>>:  Linux 上の MySQL 5.7 でパスワードを忘れる問題を解決する

推薦する

Vue-cliはプロジェクトを作成し、プロジェクト構造を分析します

目次1. ディレクトリを入力してプロジェクトを作成する2. 必要な設定項目を選択します2.1 Vue...

Linux IO 多重化 epoll ネットワーク プログラミング

序文この章では、基本的な Linux 関数と epoll 呼び出しを使用して、Linux 上で実行で...

Docker メモリ監視とストレステストの方法

起動していたDockerコンテナはメモリを使い果たした状態になっており、再起動せずにコンテナのメモリ...

MySQL 5.x 以降を使用している場合のエラー #1929 列 ''createtime'' の日付時刻値が正しくありません: '''' の簡単な解決方法

MySQL をインストールした後、テーブル データを保存および削除しようとすると、常にエラー メッセ...

Vue3+スクリプト設定+ts+Vite+Volarプロジェクト

目次Viteを使用してvue + tsプロジェクトを作成するVue 3の3つの構文オプションAPIコ...

JavaScript で H5 ゴールド コイン関数を実装する (サンプル コード)

今日は春節の金貨の赤い封筒のアクティビティを作りました。なかなか良い出来だと思います。皆さんと共有し...

HTML ヘッド構造

以下では、よく使われるヘッド構造と、各タグや要素の意味や使用シーンを紹介します(この記事は、Yisi...

js Promise同時制御メソッド

目次質問背景アイデアと実装質問次のように、同時実行 Promise の数を制御するメソッドを記述する...

最新の仮想マシン VMware 14 インストール チュートリアル

まず、VMware 14のアクティベーションコードをお渡ししますFF31K-AHZD1-H8ETZ-...

Linux (CentOS7) に Tomcat をインストールし、Tomcat をスタートアップ項目として設定します (tomcat8 を例に挙げます)

目次TomcatをインストールするTomcat 圧縮パッケージをダウンロードTomcatには3つの主...

MySQLクエリプランでken_lenの値を計算する方法

key_lenの意味MySQL では、次に示すように、explain を使用して SQL ステートメ...

Facebookの情報アーキテクチャの分析

<br />原文: http://uicom.net/blog/?p=762 Faceb...

JavaScript デザインパターン プロキシパターンの学習

目次概要実装保護エージェント仮想エージェント画像の遅延読み込みを実現する仮想プロキシ概要プロキシ パ...

editplus の Zen コーディング例コードの説明

たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...

CocosCreatorプロジェクト構造の仕組みの詳細な説明

目次1. プロジェクトフォルダ構造1. アセットフォルダ2. 図書館3. ローカル設定(ローカル) ...