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 でパスワードを忘れる問題を解決する

推薦する

MySQL のマスタースレーブレプリケーションと読み取り書き込み分離の原理と使用法の詳細な説明

この記事では、例を使用して、MySQL マスター/スレーブ レプリケーションと読み取り/書き込み分離...

Docker Docker の保存場所を変更する コンテナイメージのサイズ制限を変更する操作

これは新しいバージョンではもう不可能なようで、推奨されません。そうでない場合は、ソフト リンクを直接...

Linuxカーネルのアクセス制御セキュリティを強化する方法

背景以前、当社のプロジェクト チームは、Windows、Linux、macOS の 3 つの主要なオ...

Nginx SSL証明書設定エラーの解決策

1. はじめにWeb プロジェクトを Linux サーバーで公開する場合、SSL 証明書を構成する必...

LinuxでJenkinsのパスワードを忘れる方法

1.Jenkinsのインストール手順: https://www.jb51.net/article/1...

ビジュアルデザインとインタラクションデザインについて

<br />製品設計プロセス全体において、ビジュアルデザインとインタラクションデザインの...

JavaScript で配列遅延評価ライブラリを実装する方法

目次概要達成方法具体的な実装評価関数の終了を決定する生成関数の範囲変換関数マップフィルター割り込み機...

Unicode署名BOMによる事故原因の分析

ここでは、通常ヘッダーとフッターに対して行われるインクルード ファイルを使用している可能性があります...

Element-ui の組み込み 2 つのリモート検索 (ファジークエリ) の使用方法の説明

問題の説明フロントエンドリモート検索やファジークエリと呼ばれる種類のクエリがあります。 Ele.me...

CSSで特殊なグラフィックを描く方法

1. 三角形境界線の設定 コード: 幅: 300ピクセル; 高さ: 300px; 背景: 赤; 境界...

Vue カプセル化コンポーネント アップロード画像コンポーネント

この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。...

nginx の 2 つのモジュールの proxy_pass の違い

1. 1.ngx_stream_proxy_moduleモジュールのproxy_passディレクティ...

なぜ IE6 が最も多くの人に使用されているのでしょうか?

まず第一に、私はウェブデザイナーです。具体的には、私は XHTML フロントエンド デザイナーです。...

VSCode と SSH を使用したリモート開発

0. リモート開発が必要な理由組み込み Linux を開発する場合、便宜上、通常は Windows ...

セマンティックウェブページ XHTML セマンティックマークアップ

構造とプレゼンテーションを分離するもう 1 つの重要な側面は、セマンティック マークアップを使用して...