シナリオ: 一般的に使用される親コンポーネントと子コンポーネント間の相互作用方法は次のとおりです。 今日は、入力ボックスの 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 を一緒に使用することが推奨されない理由の詳細な説明
HTML5の<input="text" placeholder="...
この質問は、MySQL の権限に関する WeChat グループのネットユーザー間の議論です。次のよう...
多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...
<br />これは 123WORDPRESS.COM が提供する一連のチュートリアルです...
フォーム内のフォーム フィールドが無効に設定されている場合、フォーム フィールドの値は送信されません...
この記事では、Echartsを使用して3次元棒グラフを実装するVueの具体的なコードを参考までに共有...
いろいろ苦労した後、インターネットで検索したり、以前の会社のプロジェクトを探したり、他の人のプロジェ...
CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...
1. 概要MySQL バージョン: 5.6.21ダウンロードアドレス: https://dev.my...
これが何を意味するのかを理解するには、まずサブディレクトリとは何かを知る必要があります。では、サブデ...
目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. 準備2. 梱包を開始する...
Vue - シャトルボックス機能を実装します。効果図は次のようになります。 CS 。移行{ ディスプ...
序文前回の記事では、eコマース シナリオでのフラッシュ セールの例を通じて、モノリシック アーキテク...
Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮...
目次1. usrディレクトリにHadoopディレクトリを作成し、インストールパッケージをそのディレク...