ホームページ > 記事 > ウェブフロントエンド > 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 以降で構成可能):
値プロパティを受け入れます
新しい値があるときに入力イベントをトリガーし、新しい値をパラメーターとして受け取ります
非常に単純な通貨を見てみましょう入力のカスタマイズ コントロール: --親コンポーネントのサブコンポーネント テンプレートを参照するときにバインディング v-model データを使用します:
<currency-input v-model="price"></currency-input>
Vue.component('currency-input', { template: '\ <span>\ $\ <input\ ref="input"\ v-bind:value="value"\ v-on:input="updateValue($event.target.value)"\ >\ </span>\ ', props: ['value'], methods: { // 不是直接更新值,而是使用此方法来对输入值进行格式化和位数限制 updateValue: function (value) { var formattedValue = value // 删除两侧的空格符 .trim() // 保留 2 位小数 .slice( 0, value.indexOf('.') === -1 ? value.length : value.indexOf('.') + 3 ) // 如果值尚不合规,则手动覆盖为合规的值 if (formattedValue !== value) { this.$refs.input.value = formattedValue } // 通过 input 事件带出数值 this.$emit('input', Number(formattedValue)) } } })
カスタム コンポーネントの v-model
2.2.0 New
デフォルトでは、コンポーネントの v-model -model value prop と input イベントを使用します。ただし、ラジオ ボタンやチェック ボックスなどの入力タイプでは、値が他の目的に使用される場合があります。モデル オプションを使用すると、そのような競合を回避できます:
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 を明示的に宣言する必要があることに注意してください。
上記は私があなたのためにまとめたものです。
関連記事:
vue-cli axiosリクエストメソッドとクロスドメイン処理の問題
jQueryはブラウザ間のジャンプとパラメータの受け渡し機能を実現[サポート]漢字】
以上がVue.jsカスタムイベントのフォーム入力コンポーネントメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。