Vue3のv-model関数の詳細説明：双方向データバインディングの応用-Vue.js-php.cn

Vue3のv-model関数の詳細説明：双方向データバインディングの応用

WBOY

リリース： 2023-06-18 10:25:39

オリジナル

4544 人が閲覧しました

フロントエンドテクノロジの継続的な開発に伴い、人気のあるフロントエンドフレームワークとしての Vue も常に更新され、反復されています。最新バージョンの Vue3 には多くの新機能が導入され、より便利で柔軟に使用できるようになりました。

その中でも、v-model 関数は Vue3 の注目すべき新機能の 1 つです。双方向のデータバインディングを実現できます。つまり、v-model 関数を使用すると、親コンポーネントと子コンポーネント間の通信を簡単に実現できるだけでなく、ユーザーが入力したデータを、成分。次に、この記事では、Vue3 の v-model 関数について詳しく説明し、実際のアプリケーションでの使用法を検討します。

1. v-model 関数の基本的な使い方

Vue3 では、v-model 関数の基本的な使い方は Vue2 とあまり変わりません。通常の input タグの場合、タグ内で v-model 関数を使用して双方向のデータバインディングを実装できます。

たとえば、次のコードでは:

<template>
  <div>
    <input v-model="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
};
</script>

ログイン後にコピー

まず、data に message という名前のデータを定義します。次に、input タグで v-model 関数を使用して、ユーザーが入力したデータをデータに双方向バインドします。このようにして、ユーザーが入力ボックスにデータを入力すると、データはデータ内のメッセージと自動的に同期されます。メッセージを使用する場合、それをインターフェイスに直接レンダリングすることもできます。

2. カスタムコンポーネントの v-model 関数

場合によっては、カスタムコンポーネントを使用し、これらのコンポーネントに v-model を適用する必要があります。 Vue3 では、コンポーネントにモデルオプションを追加することで、カスタムコンポーネントに v-model 関数を実装できます。

たとえば、次のコードでは:

<template>
  <div>
    <my-input v-model="message"></my-input>
  </div>
</template>

<script>
import MyInput from "./MyInput.vue";

export default {
  components: {
    MyInput,
  },
  data() {
    return {
      message: "",
    };
  },
};
</script>

ログイン後にコピー

テンプレートでカスタムコンポーネント my-input を使用し、それをデータ内のメッセージにバインドします。次に、カスタムコンポーネントで、モデルオプションを追加する必要があります。

<template>
  <input :value="value" @input="$emit('update:value', $event.target.value)" />
</template>

<script>
export default {
  props: ["value"],
};
</script>

ログイン後にコピー

カスタムコンポーネントでは、コンポーネントのプロパティとして値を指定し、ユーザーが入力した値を $emit('update: value ', $event.target.value) イベントが value に更新されます。 v-model 関数を使用してカスタムコンポーネントをバインドすると、Vue は $vnode.model の値をプロップとしてコンポーネントに自動的に渡し、$emit('update:propName', value) の値を次の値と組み合わせます。 $ vnode.model.sync プロパティはバインドされています。次に、カスタムコンポーネントで v-model 関数を使用する方法を示します。

<template>
  <div>
    <my-input v-model="message"></my-input>
  </div>
</template>

<script>
import MyInput from "./MyInput.vue";

export default {
  components: {
    MyInput,
  },
  data() {
    return {
      message: "",
    };
  },
};
</script>

ログイン後にコピー

MyInput コンポーネントに、値を value に更新するモデルオプションを追加します。この値の値は、コンポーネントの初期化時に親コンポーネントから受信され、ユーザー入力の変更に応じて更新されます。

親コンポーネントで v-model を使用してカスタムコンポーネントをバインドすると、Vue はコンポーネントを親コンポーネントのデータにバインドするコードを自動的に生成します。

<my-component v-model="foo"></my-component>

ログイン後にコピー

これを実行すると、親コンポーネント内のカスタムコンポーネントを簡単に読み取って操作できるだけでなく、データの双方向バインディングも実現できます。

3. フォームへの v-model の適用

フォームはフロントエンド開発の非常に重要な部分です。 Vue3 では、v-model 関数も非常に便利な実装方法を提供します。 v-model 関数を使用すると、フォーム内のデータをコンポーネントの状態に自動的にバインドできるため、非常に便利で効率的なフォーム操作が実現します。

たとえば、次のコードでは:

<template>
  <div>
    <form>
      <label>名字：</label>
      <input v-model="name" />
      <br />
      <label>年龄：</label>
      <input v-model="age" />
    </form>

    <div>
      <h3>您的名字是：{{ name }}</h3>
      <h3>您的年龄是：{{ age }}</h3>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      age: "",
    };
  },
};
</script>

ログイン後にコピー

このコードでは、v-model 関数を使用してフォーム内の input タグをバインドしていることがわかります。ユーザーが入力ボックスにデータを正常に入力すると、Vue3 はデータをコンポーネントの状態に自動的に保存し、更新します。また、二重括弧バインディングを通じてコンポーネントのステータスをインターフェースに表示すると、v-model に保存されたデータを直接読み取ることができます。

つまり、Vue3 では、v-model 関数は親コンポーネントと子コンポーネント間の双方向のデータバインディングを実現できるだけでなく、フォーム内のデータをコンポーネントの状態に簡単にバインドすることもでき、それによって次のことを実現します。速く、効率的で便利な操作。したがって、Vue3 の v-model 機能を使用すると、フロントエンドプロジェクトの開発をより効率的に行うことができ、フロントエンド開発におけるアプリケーションレベルを向上させることができます。

以上がVue3のv-model関数の詳細説明：双方向データバインディングの応用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。