序文実際の業務プロジェクト開発では、親コンポーネントが最初に子コンポーネントに値を渡し、その後子コンポーネントがシーンをレンダリングして表示するというシナリオがよくあります。以下に、現在の業務で遭遇して使用したいくつかの方法をまとめました。実装方法やアイデアの参考になります。誤解や他の方法がある場合は、コメント欄にメッセージを残して指導してください〜 一般的な方法一方向の prop 転送ルールに従うことをお勧めします。基本データ型と参照データ型の両方が許容されます。 1. 親コンポーネントを介して子コンポーネントの発行イベントをリッスンしてpropを変更します。原理:
親コンポーネントのコードは次のとおりです。 <テンプレート> <div style="background-color: skyblue;"> <h3>子コンポーネントが親コンポーネントを介してイベントを発行するのをリッスンしてプロパティを変更します</h3> <div>親オブジェクト:{{ obj }}</div> <div>親メッセージ:{{ メッセージ }}</div> <!-- 親コンポーネントが子コンポーネントを呼び出すと、子コンポーネントによってトリガーされた放出イベントを on 経由でリッスンして値を受け取り、ユーザーを更新します --> <emitChild :obj="obj" :msg="メッセージ" @update-obj="updateObj" @update-msg="更新メッセージ" /> </div> </テンプレート> <スクリプト> './components/emitChild' から emittingChild をインポートします。 エクスポートデフォルト{ 名前: 'emitUpdate', コンポーネント: 子を放出する }, データ () { 戻る { オブジェクト: { 名前: 'zhangsan'、 年齢: 18 }, メッセージ: 'こんにちは' } }, メソッド: { // 子コンポーネントによってトリガーされたイベントをリッスンし、データ内のオブジェクトを更新します updateObj (キー、newVal) { this.obj[キー] = newVal }, // 子コンポーネントによってトリガーされたイベントをリッスンし、データ内のメッセージを更新します 更新メッセージ (新しい値) { this.msg = 新しい値 } } } </スクリプト> サブコンポーネントコードは次のとおりです。 <テンプレート> <div style="background-color: pink;"> <div> <span>名前を変更:</span> <!-- ここで、バインディング値は value です。これは、入力が主にプロパティ データを表示するために使用され、実際の変更はサブコンポーネント内にないためです。サブコンポーネントは変更トリガー ソースとしてのみ使用されます --> <!-- 入力イベントをトリガー ソースのエントリ ポイントとしてバインドします --> <input type="text" :value="obj.name" @input="updateObj($event, 'name')"> </div> <div> <span>年齢を変更:</span> <input type="text" :value="obj.age" @input="updateObj($event, 'age')"> </div> <div> <span>メッセージを変更:</span> <input type="text" :value="msg" @input="updateMsg($event.target.value)"> </div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'emitUpdateChild', 小道具: { オブジェクト: { タイプ: オブジェクト、 デフォルト: () => {} }, メッセージ: { タイプ: 文字列、 デフォルト: '' } }, メソッド: { // 親コンポーネントに obj を更新するよう通知する updateObj ($event, キー) { // 入力値と、更新する必要がある obj 内の対応する属性を受け取り、それを親コンポーネントに返します // 親コンポーネントは、子コンポーネントが更新する必要がある obj 内の属性値を知ることができます this.$emit('update-obj', key, $event.target.value) }, // 親コンポーネントにメッセージの更新を通知する 更新メッセージ (新しい値) { this.$emit('update-msg', newVal) } } } </スクリプト> 2. 親コンポーネントの同期修飾子と子コンポーネントの発行イベントを介してプロパティを変更する原理:
親コンポーネントのコードは次のとおりです。 <テンプレート> <div style="background-color: skyblue;"> <h3>親コンポーネントの同期修飾子と子コンポーネントの発行イベントを介してプロパティを変更する</h3> <div>親オブジェクト:{{ obj }}</div> <div>親メッセージ:{{ メッセージ }}</div> <!-- 親コンポーネントが子コンポーネントを呼び出してプロパティを渡す場合は、プロパティの後に .sync を追加するだけです --> <syncChild:obj.sync="obj":msg.sync="msg" /> <!-- 同期は実際には、@listener トリガー イベント名 = "親データのプロパティ名 = エミットによって渡された値 (つまり $event)" を実行することと同じです。 このコード --> <!-- 効果は次のコードと同等なので、親コンポーネントのメソッドでデータを変更するメソッドを定義する必要はありません--> <!-- <同期子 :obj="obj" :msg="メッセージ" @update-obj="obj = $event" @update-msg="メッセージ = $イベント" /> --> </div> </テンプレート> <スクリプト> './components/syncChild' から syncChild をインポートします。 エクスポートデフォルト{ 名前: 'syncUpdate', コンポーネント: 同期子 }, データ () { 戻る { オブジェクト: { 名前: 'zhangsan'、 年齢: 18 }, メッセージ: 'こんにちは' } } } </スクリプト> サブコンポーネントコードは次のとおりです。 <テンプレート> <div style="background-color: pink;"> <div> <span>名前を変更:</span> <!-- ここで、バインディング値は value です。これは、入力が主にプロパティ データを表示するために使用され、実際の変更はサブコンポーネント内にないためです。サブコンポーネントは変更トリガー ソースとしてのみ使用されます --> <!-- 入力イベントをトリガー ソースのエントリ ポイントとしてバインドします --> <input type="text" :value="childObj.name" @input="updateObj($event, 'name')"> </div> <div> <span>年齢を変更:</span> <input type="text" :value="childObj.age" @input="updateObj($event, 'age')"> </div> <div> <span>メッセージを変更:</span> <input type="text" :value="msg" @input="updateMsg($event.target.value)"> </div> </div> </テンプレート> <スクリプト> // ここでは lodash ツールライブラリの cloneDeep ディープコピーメソッドを紹介します // 公式ドキュメントアドレス https://www.lodashjs.com/ 'lodash' から { cloneDeep } をインポートします エクスポートデフォルト{ 名前: 'emitUpdateChild', 小道具: { オブジェクト: { タイプ: オブジェクト、 デフォルト: () => {} }, メッセージ: { タイプ: 文字列、 デフォルト: '' } }, データ () { 戻る { // ここでは、prop の obj がディープ コピーによってコピーされます。主な目的は次の通りです。 // 1. 異なるメモリアドレスを使用して 2 つのオブジェクト (参照型) を区別します // 2. 子コンポーネントのレンダリング/変更/返却を容易にするために、オブジェクト内のすべての値を保持します childObj: cloneDeep(this.obj) } }, メソッド: { // 親コンポーネントに obj を更新するよう通知する updateObj ($event, キー) { // 入力値と、更新する必要がある childObj 内の対応する属性を受け取ります // 次に、childOBj を更新して親コンポーネントに渡します // 親コンポーネントは、取得した childObj をデータの obj に直接更新できます this.childObj[key] = $event.target.value this.$emit('update:obj', this.childObj) }, // 親コンポーネントにメッセージの更新を通知する 更新メッセージ (新しい値) { this.$emit('update:msg', newVal) } } } </スクリプト> ヒントこれは主に参照データ型を対象とし、Vue のプロパティ検出メカニズムをバイパスします。プロジェクトの仕様でこの記述が許可されているかどうかによって異なります。 3. データを通じてプロパティを変更する前提条件: 参照データ型のみ実装可能 原理:
親コンポーネントのコードは次のとおりです。 <テンプレート> <div style="background-color: skyblue;"> <h3>prop をデータに割り当てて変更する</h3> <div>親オブジェクト:{{ obj }}</div> <div>親メッセージ:{{ メッセージ }}</div> <dataChild :obj="obj" :msg.sync="msg" /> </div> </テンプレート> <スクリプト> './components/dataChild' から dataChild をインポートします。 エクスポートデフォルト{ 名前: 'dataUpdate', コンポーネント: データ子 }, データ () { 戻る { オブジェクト: { 名前: 'zhangsan'、 年齢: 18 }, メッセージ: 'こんにちは' } } } </スクリプト> サブコンポーネントコードは次のとおりです。 <テンプレート> <div style="background-color: pink;"> <div> <span>名前を変更:</span> <!-- ここでは、prop をデータに直接割り当てているため、v-model の双方向バインディングを直接使用してデータを変更できます --> <input type="text" v-model="dataObj.name"> </div> <div> <span>年齢を変更:</span> <input type="text" v-model="dataObj.age"> </div> <div> <span>メッセージを変更:</span> <!-- ウォッチ リスナーを通じて実装できる基本データ型を変更する別の方法を示します --> <input type="text" v-model="dataMsg"> </div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'dataChild', 小道具: { オブジェクト: { タイプ: オブジェクト、 デフォルト: () => {} }, メッセージ: { タイプ: 文字列、 デフォルト: '' } }, データ () { 戻る { // 参照データ型が直接割り当てられると、それは浅いコピーとなり、メモリアドレスのみがコピーされ、一方を変更するともう一方に反映されます。dataObj: this.obj、 // 基本データ型を直接割り当てると、値がコピーされ、一方を変更してももう一方には影響しません。dataMsg: this.msg } }, 時計: // ここでは、データからコピーされた dataMsg をリッスンし、変更されたら、emit を実行して親コンポーネントに dataMsg (newVal) を更新するように通知します。{ this.$emit('update:msg', newVal) } } } </スクリプト> 4. 計算プロパティを通じてpropを変更する前提条件: 参照データ型のみ実装可能 原理:
親コンポーネントのコードは次のとおりです。 <テンプレート> <div style="background-color: skyblue;"> <h3>計算プロパティの監視を通じてプロパティを変更する</h3> <div>親オブジェクト:{{ obj }}</div> <div>親メッセージ:{{ メッセージ }}</div> <computedChild :obj="obj" :msg.sync="msg" /> </div> </テンプレート> <スクリプト> './components/computedChild' から computedChild をインポートします。 エクスポートデフォルト{ 名前: 'computedUpdate', コンポーネント: 計算された子 }, データ () { 戻る { オブジェクト: { 名前: 'zhangsan'、 年齢: 18 }, メッセージ: 'こんにちは' } } } </スクリプト> サブコンポーネントコードは次のとおりです。 <テンプレート> <div style="background-color: pink;"> <div> <span>名前を変更:</span> <!-- ここでは、算出プロパティを通じて prop を直接リッスンしているので、v-model の双方向バインディングを直接使用してデータを変更できます --> <input type="text" v-model="computedObj.name"> </div> <div> <span>年齢を変更:</span> <input type="text" v-model="computedObj.age"> </div> <div> <span>メッセージを変更:</span> <!-- 基本データ型を変更する別の方法は、計算プロパティのセッターを通じて実現できます --> <input type="text" v-model="computedMsg"> </div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'computedChild', 小道具: { オブジェクト: { タイプ: オブジェクト、 デフォルト: () => {} }, メッセージ: { タイプ: 文字列、 デフォルト: '' } }, 計算: { 計算されたオブジェクト() { // ここでは、参照データ型objが直接返されます。この時点で、computedObjはobjと同等です。 // これは浅いコピーなので、メモリアドレスのみがコピーされ、一方を変更するともう一方に反映されます。 return this.obj }, 計算されたメッセージ: { 得る () { // プロパティが更新されるたびに、計算プロパティのゲッターメソッドがトリガーされ、最新の値が取得されます // 基本データ型を直接返す場合、値がコピーされ、一方を変更してももう一方には影響しません。 return this.msg }, 設定(新しい値) { // ここでは、計算プロパティのセッターメソッドを使用して、値が変更されたときにエミットをトリガーし、親コンポーネントに値を更新するように通知します。this.$emit('update:msg', newVal) } } } } </スクリプト> これで、子コンポーネントを介して親コンポーネントのプロパティを変更する Vue の実装方法に関するこの記事は終了です。親コンポーネントのプロパティを変更する Vue 子コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL の自動増分 ID (主キー) が不足した場合の解決策
この記事では、検証コード機能を実装するためのvue+spring bootの具体的なコードを例として...
ブラウザはおそらく私たちにとって最も馴染みのあるツールです。 Firefox、Opera、Safar...
簡単に言えば、ウェブサイト構築とは、「この人はどんな外見をしているのか」と「この人はどんな内面を持っ...
タイムスタンプの差を計算するSQLメソッド概要場合によっては、特定のレコードを時間で検索する必要があ...
停止したすべてのDockerコンテナを1つのコマンドで再起動するdocker ps -a | gre...
問題の説明:デスクトップ コンピューターとキャンパス ネットワークを使用して、有線モードでインターネ...
1. ビジネスシナリオ最近はファイルのアップロードやダウンロードに関する開発をしています。ダウンロー...
この記事では、例を使用して、MySQL ストアド プロシージャで複数の値を返す方法について説明します...
1. Flashプラグインパッケージのダウンロードアドレス: https://get.adobe.c...
1. はじめになぜインデックスが必要なのでしょうか?一般的なアプリケーション システムでは、読み取り...
以前、追加と変更を一緒に記述したテストプログラムを書いたことがあります。変更が必要な場合は、フォーム...
forループfor ループは配列の要素をループします。文法: for (初期化変数; 条件式; 繰り...
GitHubアドレス、気に入ったらスターを付けてくださいプラグインのプレビューチュートリアル1. プ...
アップグレードの背景: MySQLの下位バージョンの脆弱性を解決するために、MySQLはMySQL ...
序文インデックスを追加した場合と追加しなかった場合の違いを反映するには、数百万のデータを使用する必要...