ホームページ >ウェブフロントエンド >jsチュートリアル >フォーム入力コンポーネントに Vue.js カスタム イベントを使用する方法
今回はVue.jsのカスタムイベントを使ってフォーム入力コンポーネントを実装する方法を紹介します。実際のケースを見てみましょう。
Vue.js はフォーム入力コンポーネントにカスタム イベントを使用しますカスタム イベントを使用して、カスタム フォーム入力コンポーネントを作成し、双方向データ バインディングに v-model を使用できます。留意してください:
<input v-model="something">これは、次の例の糖衣構文にすぎません:
<input
v-bind:value="something"
v-on:input="something = $event.target.value">
<custom-input
v-bind:value="something"
v-on:input="something = arguments[0]">
</custom-input>
したがって、次の v モデルを作成するにはコンポーネントが有効になると、次のようになります (2.2.0 以降で構成可能):
値プロパティを受け入れます
新しい値があるときに入力イベントをトリガーし、新しい値をパラメーターとして受け取ります
非常に単純な通貨を見てみましょう入力のカスタマイズ
Control以来define コンポーネント の v-model2.2.0 New
デフォルトでは、Aコンポーネントの v-model は、値のプロパティと入力イベントを使用します。ただし、ラジオ ボタンや
チェックボックスなどの入力タイプでは、値が他の目的に使用される場合があります。モデル オプションを使用すると、そのような競合を回避できます: Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean,
// 这样就允许拿 `value` 这个 prop 做其它事了
value: String
},
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
上記のコードは次と同等です:
<my-checkbox :checked="foo" @change="val => { foo = val }" value="some value"> </my-checkbox>
それでも、checked prop を明示的に宣言する必要があることに注意してください。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
vue で xe-utils を使用する方法 vue-router のビルド時にルーティング ページが表示されない場合の対処方法以上がフォーム入力コンポーネントに Vue.js カスタム イベントを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。