vue3 コンポーネントでの v-model の使用と詳細な説明

vue3 コンポーネントでの v-model の使用と詳細な説明

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 です
ここで、子コンポーネントの入力ボックス v-model と親コンポーネントの双方向バインディングを実現するには、計算プロパティを使用する必要があることがわかります。生徒の中には、props 内のテキストを直接バインドしたい人もいるかもしれませんね。前述のように、読み取りのみの場合はバインドできますが、変更する場合は、イベントを発行して親コンポーネントにデータの更新を通知する必要があります (props の値を変更することはできません。読み取りのみ可能です!!!)。そのため、計算プロパティでは、セットでイベントを発行して親コンポーネントのデータを更新し、読み取り時には props の値を直接読み取ります。

要約する

vue3 コンポーネントにおける v-model の使用と説明に関するこの記事はこれで終わりです。より関連性の高い vue3 コンポーネントの v-model 使用コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • v-model 双方向バインディングデータを実装する vue カスタム コンポーネントのサンプル コード
  • Vue の v-model ディレクティブと .sync 修飾子の違いの詳細な説明
  • Vue の双方向イベントバインディング v-model の原理についての簡単な説明
  • Vueはv-modelを使用してel-paginationコンポーネントのプロセス全体をカプセル化します。
  • Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法
  • Vue で親子コンポーネントの値を双方向バインドするために v-model を使用するときに発生する問題と解決策
  • Vue フォーム入力ボックスがフォーカスおよびぼかしイベントをサポートしていない問題の解決策
  • カスタムイベントを使用した Vue のフォーム入力コンポーネントの詳細な使用方法 [日付コンポーネントと通貨コンポーネント]
  • Vue フォーム入力バインディングのサンプルコード
  • Vue フォームの入力フォーマットの中国語入力方法の異常
  • Vue フォーム入力バインディング v-model

<<:  ServerManager の起動時にデータベースに接続できないエラーを解決する方法

>>:  CentOS IP接続ネットワーク実装プロセス図

推薦する

CentOS 8 に Postfix メール サーバーをインストールして設定する方法

Postfix は、Linux システム上で電子メールをルーティングまたは配信するために使用される無...

Vue3 の SetUp 関数のプロパティとコンテキスト パラメータの詳細な説明

1. setUp関数の最初のパラメータpropsセットアップ(プロパティ、コンテキスト){}最初のパ...

MySQL 圧縮版 zip のインストールに関する問題の解決策

本日、MySQLの圧縮版をインストールする際に問題が発生しました。サービスが起動できず、2、3時間苦...

Vue の匿名スロットと名前付きスロットの詳細な説明

目次1. 匿名スロット2. 名前付きスロット要約するスロット (slot) は、Vue のコンテンツ...

MySQL の concat 関数についての簡単な説明。MySQL でフィールドの前または後に文字列を追加する方法

MySQL で concat 関数を使用する方法: CONCAT(文字列1、文字列2、…)戻り値は、...

Vue で SVG アイコンを導入する 2 つの方法

Vue で SVG アイコンを導入する方法Vue で svg アイコンを導入する方法 1インストール...

JS オブジェクト コンストラクター Object.freeze

目次概要例1) オブジェクトをフリーズする2) 配列をフリーズする3) 浅い凍結4) ディープフリー...

Vueはスクロールロードテーブルを実装します

目次成果を達成する転がり荷重知識備蓄コンポーネントのパッケージ1. コンポーネントの命名2. 小道具...

nginx で第 3 レベルドメイン名を設定する方法の例

問題の説明nginx を設定することで、異なるポートを介して異なる Web アプリケーションにアクセ...

アイデアのパッケージ化とクラウドサービスへのアップロードにおけるプロジェクトプロセスの分析

1つ。まず、アイデアとしてパッケージ化する必要があります。私はSpringbootフレームワークプロ...

ローカルで起動したときに Vue プロジェクトがクッキーを保持できない問題を解決する

vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...

ウェブサイト標準の検証方法を通じてFlashページを共有する方法

1. 埋め込みは違法です<embed> タグは Netscape のプライベート タグで...

自動同期テーブル構造のMySql開発

開発の問題点開発プロセスでは、データベース フィールドが頻繁に変更されるため、RD 環境と QA 環...

MySQL インデックス失敗の原理

目次1. インデックス失敗の理由2. インデックスの秩序が崩れる状況を見てみましょう。 - インデッ...

InnoDBのインデックスページ構造、挿入バッファ、適応ハッシュインデックスについての簡単な説明

InnoDB インデックスの物理構造すべての InnoDB インデックスは Btree インデックス...