シナリオ: 一般的に使用される親コンポーネントと子コンポーネント間の相互作用方法は次のとおりです。 今日は、入力ボックスの v-model を参照して、カスタム コンポーネントの双方向データ バインディングを実装し、別の方法でインタラクションを実装します。 サブコンポーネントの定義: props 属性値を直接変更することはできないため、ここで valueData を定義し、listen によってリアルタイムで値を受け取り、click メソッドを通じて valueData を変更します。 コードは次のとおりです。 <テンプレート> <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 を通じてテキスト値をバインドします。名前は必ずしも値である必要はなく、命名規則に準拠する他の文字列にすることができます。ここではテキストです。 コードは次のとおりです。 <テンプレート> <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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Elimination の JavaScript ソースコード
>>: Vue で v-if と v-for を一緒に使用することが推奨されない理由の詳細な説明
HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 HTML ...
仕事の都合上、最近 HTML を PDF に変換する機能について調べることに時間を費やしました。 H...
以前にインストールしたmariadbを削除する1. rpm -qa | grep mariadb を...
## 1最近、docker デプロイメントを学習しており、当初は nginx を docker 化す...
目次1. 補足知識ポイント: 関数の暗黙的な変換2. 補足知識: call/apply を使って配列...
docker イメージを使用する場合、以下に示すように、REPOSITORY と TAG の両方が ...
訪問者があなたのウェブサイトを覚えておくのに役立つ3つの便利なコード。お気に入りに追加するためのヒン...
序文コードを書くと、時々基数変換の問題に遭遇します。一般的な変換には、2進数、8進数、10進数、16...
1. 計算プロパティとリスナー1.1 計算プロパティ <!DOCTYPE html> &...
目次1. 概要1.1 querySelector() と querySelectorAll() の使...
最近、C# を使用して Web プログラムを作成していたときに、次のような問題が発生しました。 Te...
この記事では、例を使用して、MySQL データベースの最適化のためのテーブルおよびデータベース シャ...
VMware が異常シャットダウンした後、再起動すると「この構成ファイルを排他的にロックできませんで...
序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...
現在、Web デザインではタブが広く使用されていますが、一般的に次の 2 つのタイプに分けられます。...