みなさんこんにちは。今日は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を使用して空の値を割り当てる Ⅱ: 次に、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: mysqlは昨日の日付、今日の日付、明日の日付、前の時間と次の時間の時刻を取得します
>>: Linux 上の MySQL 5.7 でパスワードを忘れる問題を解決する
目次1. ディレクトリを入力してプロジェクトを作成する2. 必要な設定項目を選択します2.1 Vue...
序文この章では、基本的な Linux 関数と epoll 呼び出しを使用して、Linux 上で実行で...
起動していたDockerコンテナはメモリを使い果たした状態になっており、再起動せずにコンテナのメモリ...
MySQL をインストールした後、テーブル データを保存および削除しようとすると、常にエラー メッセ...
目次Viteを使用してvue + tsプロジェクトを作成するVue 3の3つの構文オプションAPIコ...
今日は春節の金貨の赤い封筒のアクティビティを作りました。なかなか良い出来だと思います。皆さんと共有し...
以下では、よく使われるヘッド構造と、各タグや要素の意味や使用シーンを紹介します(この記事は、Yisi...
目次質問背景アイデアと実装質問次のように、同時実行 Promise の数を制御するメソッドを記述する...
まず、VMware 14のアクティベーションコードをお渡ししますFF31K-AHZD1-H8ETZ-...
目次TomcatをインストールするTomcat 圧縮パッケージをダウンロードTomcatには3つの主...
key_lenの意味MySQL では、次に示すように、explain を使用して SQL ステートメ...
<br />原文: http://uicom.net/blog/?p=762 Faceb...
目次概要実装保護エージェント仮想エージェント画像の遅延読み込みを実現する仮想プロキシ概要プロキシ パ...
たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...
目次1. プロジェクトフォルダ構造1. アセットフォルダ2. 図書館3. ローカル設定(ローカル) ...