v-model 入力で双方向バインディングデータを使用するVue では、入力ボックスの入力値をバインドするために v-model をよく使用します。v-bind を介して値をバインドし、@input 入力イベントと組み合わせてバインドされた値を動的に変更して双方向バインディングを実現するというシンプルな実装原理は、誰もが知っているはずです。以下は、Vue3 の実装コードです。 <テンプレート> <input type="text" :value="tryText" @input="handelInput"> <h2>{{tryText}}</h2> </テンプレート> <スクリプト> 「vue」から{ref}をインポートします エクスポートデフォルト{ 設定(){ let tryText = ref("デフォルトの入力値") 関数handelInput(e) { tryText.value = e.target.value; //ref で定義されたデータアクセスと変更は .value を通じて行う必要があります } 戻る { テキストを試す、 ハンドル入力 } } } </スクリプト> 皆さんは ipnut で v-model をよく使用していると思います。では、コンポーネントで v-model を使用する方法とその役割について見ていきましょう。 コンポーネント内の v-modelコンポーネントで v-model を使用するにはどうすればいいですか?簡単に実装してみましょう 親コンポーネント <テンプレート> <!-- コンポーネントバインディング v-model --> <hy-input v-model="メッセージ"></hy-input> <h2>{{メッセージ}}</h2> </テンプレート> <スクリプト> '@vue/reactivity' から { ref } をインポートします。 HyInput を "../components/HyInput.vue" からインポートします。 エクスポートデフォルト{ コンポーネント: {HyInput }, 設定(){ let message = ref("嘿嘿嘿ヽ(*^ー^)(^ー^*)ノ") 戻る { メッセージ、 } } } </スクリプト> サブコンポーネント <テンプレート> <button @click="handelClick">O(∩_∩)O ハハハ〜</button> <br> </テンプレート> <スクリプト> エクスポートデフォルト{ 小道具:{ モデル値:文字列、 }, 出力:['update:modelValue'], セットアップ(プロパティ、コンテキスト){ 関数handelClick() { context.emit("update:modelValue","O(∩_∩)O哈哈~") } 戻る { ハンドルクリック、 } } } </スクリプト> これを見ると、なぜイベントを開催する必要があるのか疑問に思うかもしれません。デフォルトのプロパティ受信値が存在するのはなぜですか?心配しないでください。実装原理から理解できます。 このように、子コンポーネントのボタンをクリックすることで、親コンポーネントのメッセージ データを変更できます。これは、コンポーネント内の双方向データ バインディング v-model の簡単な実装です。 双方向バインディングなので、入力における実装原理と似ているのではないかと大胆に推測してみましょう。どのように動作するか見てみましょう。 親コンポーネント <テンプレート> <!-- 原則 --> <hy-input :modelValue="メッセージ" @update:modelValue="メッセージ = $event"></hy-input> <h2>{{メッセージ}}</h2> </テンプレート> <スクリプト> '@vue/reactivity' から { ref } をインポートします。 HyInput を "../components/HyInput.vue" からインポートします。 エクスポートデフォルト{ コンポーネント: {HyInput }, 設定(){ let message = ref("嘿嘿嘿ヽ(*^ー^)(^ー^*)ノ") 戻る { メッセージ、 } } } </スクリプト> サブコンポーネントは変更されません <テンプレート> <button @click="handelClick">O(∩_∩)O ハハハ〜</button> <br> </テンプレート> <スクリプト> エクスポートデフォルト{ 小道具:{ モデル値:文字列、 }, 出力:['update:modelValue'], セットアップ(プロパティ、コンテキスト){ 関数handelClick() { context.emit("update:modelValue","O(∩_∩)O哈哈~") } 戻る { ハンドルクリック、 } } } </スクリプト> 結果はそれが確かに可能であることを示している このようにして、子コンポーネントでの発行イベントとデフォルトの受信値を理解できます。基本的な実装原則は、親コンポーネントが子コンポーネントに値を渡し、子コンポーネントが props を通じて値を受け取るというものです。ただし、子コンポーネントでデータを変更する必要がある場合は、イベントを発行して親コンポーネントに通知し、親コンポーネントは渡された値を受け取って変更します。実際には、親コンポーネントと子コンポーネント間の通信ですが、Vue は単純なカプセル化を行うのに役立ちます。 ps: デフォルトでは、v-model にバインドされたデータは、エミッション イベントを受け取るために modelValue を使用してサブコンポーネントで読み取る必要があります。デフォルトの名前は update:modelValue です。複数の値をバインドする場合やカスタム名を使用する場合は、以下の他の記述方法を参照してください。 ps: props を変更してもデータを変更することはできません。まず、これは特に悪い開発習慣です。次に、props の特性はデータの転送のみを担当していることがわかります。props を変更しても、目的の効果は得られません。親コンポーネントにデータを更新するように通知する必要があります。これがベストプラクティスです。 他の書き方子コンポーネントの入力と親コンポーネント間の双方向バインディングをどのように実装すればよいでしょうか?複数の双方向バインディングデータを渡す必要がある場合はどうすればよいでしょうか?カスタム名はどうですか? <テンプレート> <!-- コンポーネントバインディング v-model --> <hy-input v-model="メッセージ" v-model:text="入力テキスト"></hy-input> <h2>{{メッセージ}}</h2> <h2>{{入力テキスト}}</h2> </テンプレート> <スクリプト> '@vue/reactivity' から { ref } をインポートします。 HyInput を "../components/HyInput.vue" からインポートします。 エクスポートデフォルト{ コンポーネント: {HyInput }, 設定(){ let message = ref("嘿嘿嘿ヽ(*^ー^)(^ー^*)ノ") inputText = ref("嘻嘻嘻嘻") とします 戻る { メッセージ、 入力テキスト } } } </スクリプト> サブコンポーネント <テンプレート> <button @click="handelClick">O(∩_∩)O ハハハ〜</button> <br> <input type="text" v-model="customText"> <br> </テンプレート> <スクリプト> 「vue」から {computed} をインポートします エクスポートデフォルト{ 小道具:{ モデル値:文字列、 テキスト:文字列 }, 出力:['update:modelValue',"update:text"], セットアップ(プロパティ、コンテキスト){ 関数handelClick() { context.emit("update:modelValue","O(∩_∩)O哈哈~") } カスタムテキストを計算({ 設定(値){ context.emit("更新:テキスト",値) }, 得る(){ props.textを返す } }) 戻る { ハンドルクリック、 カスタムテキスト、 } } } </スクリプト> 複数のバインディング値と名前の変更 v-model:text="inputText" サブコンポーネント内のプロパティは直接テキストです 発行イベント名は update:text です 要約するvue3 コンポーネントにおける v-model の使用と説明に関するこの記事はこれで終わりです。より関連性の高い vue3 コンポーネントの v-model 使用コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: ServerManager の起動時にデータベースに接続できないエラーを解決する方法
Postfix は、Linux システム上で電子メールをルーティングまたは配信するために使用される無...
1. setUp関数の最初のパラメータpropsセットアップ(プロパティ、コンテキスト){}最初のパ...
本日、MySQLの圧縮版をインストールする際に問題が発生しました。サービスが起動できず、2、3時間苦...
目次1. 匿名スロット2. 名前付きスロット要約するスロット (slot) は、Vue のコンテンツ...
MySQL で concat 関数を使用する方法: CONCAT(文字列1、文字列2、…)戻り値は、...
Vue で SVG アイコンを導入する方法Vue で svg アイコンを導入する方法 1インストール...
目次概要例1) オブジェクトをフリーズする2) 配列をフリーズする3) 浅い凍結4) ディープフリー...
目次成果を達成する転がり荷重知識備蓄コンポーネントのパッケージ1. コンポーネントの命名2. 小道具...
問題の説明nginx を設定することで、異なるポートを介して異なる Web アプリケーションにアクセ...
1つ。まず、アイデアとしてパッケージ化する必要があります。私はSpringbootフレームワークプロ...
vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...
1. 埋め込みは違法です<embed> タグは Netscape のプライベート タグで...
開発の問題点開発プロセスでは、データベース フィールドが頻繁に変更されるため、RD 環境と QA 環...
目次1. インデックス失敗の理由2. インデックスの秩序が崩れる状況を見てみましょう。 - インデッ...
InnoDB インデックスの物理構造すべての InnoDB インデックスは Btree インデックス...