ホームページ  >  記事  >  ウェブフロントエンド  >  Vue.jsカスタムイベントのフォーム入力コンポーネントメソッド

Vue.jsカスタムイベントのフォーム入力コンポーネントメソッド

亚连
亚连オリジナル
2018-05-31 16:32:541561ブラウズ

ここで、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(&#39;currency-input&#39;, {
 template: &#39;\
  <span>\
   $\
   <input\
    ref="input"\
    v-bind:value="value"\
    v-on:input="updateValue($event.target.value)"\
   >\
  </span>\
 &#39;,
 props: [&#39;value&#39;],
 methods: {
  // 不是直接更新值,而是使用此方法来对输入值进行格式化和位数限制
  updateValue: function (value) {
   var formattedValue = value
    // 删除两侧的空格符
    .trim()
    // 保留 2 位小数
    .slice(
     0,
     value.indexOf(&#39;.&#39;) === -1
      ? value.length
      : value.indexOf(&#39;.&#39;) + 3
    )
   // 如果值尚不合规,则手动覆盖为合规的值
   if (formattedValue !== value) {
    this.$refs.input.value = formattedValue
   }
   // 通过 input 事件带出数值
   this.$emit(&#39;input&#39;, Number(formattedValue))
  }
 }
})

カスタム コンポーネントの v-model

2.2.0 New

デフォルトでは、コンポーネントの v-model -model value prop と input イベントを使用します。ただし、ラジオ ボタンやチェック ボックスなどの入力タイプでは、値が他の目的に使用される場合があります。モデル オプションを使用すると、そのような競合を回避できます:

Vue.component(&#39;my-checkbox&#39;, {
 model: {
  prop: &#39;checked&#39;,
  event: &#39;change&#39;
 },
 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 を明示的に宣言する必要があることに注意してください。

上記は私があなたのためにまとめたものです。

関連記事:

Reactの上位コンポーネントについて簡単に解説

vue-cli axiosリクエストメソッドとクロスドメイン処理の問題

jQueryはブラウザ間のジャンプとパラメータの受け渡し機能を実現[サポート]漢字】

以上がVue.jsカスタムイベントのフォーム入力コンポーネントメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。