Comment utiliser les événements personnalisés Vue.js pour les composants d'entrée de formulaire

Cette fois, je vais vous montrer comment utiliser les événements personnalisés Vue.js pour implémenter les composants de saisie de formulaire. Quelles sont les précautions pour utiliser les événements personnalisés Vue.js pour implémenter les composants de saisie de formulaire. cas pratique, jetons un coup d'oeil ensemble.

Vue.js utilise des composants d'entrée de formulaire d'événement personnalisés

Les événements personnalisés peuvent être utilisés pour créer des composants d'entrée de formulaire personnalisés et utiliser v-model pour traiter les données Liaison bidirectionnelle . Quelque chose à garder à l'esprit :

<input v-model="something">

Il s'agit simplement d'un sucre syntaxique pour l'exemple suivant :

<input
 v-bind:value="something"
 v-on:input="something = $event.target.value">

Ainsi, lorsqu'il est utilisé dans un composant, il équivaut à ce qui suit L'abréviation de :

<custom-input
 v-bind:value="something"
 v-on:input="something = arguments[0]">
</custom-input>

Donc, pour que le modèle en V du composant prenne effet, il doit (configurable à partir de la version 2.2.0) :

Accepte un accessoire de valeur

Déclenchez l'événement d'entrée lorsqu'il y a une nouvelle valeur et utilisez la nouvelle valeur comme paramètre

Regardons un contrôle d'entrée de devise personnalisé très simplecontrôle :--Dans le parent Lorsque vous référencez un modèle de sous-composant dans un composant, liez les données du modèle v :

<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))
  }
 }
})

Auto-définissez les de v-model

Nouveau dans la version 2.2.0

Par défaut, le v-model d'un composant utilisera des accessoires de valeur et des événements d'entrée. Mais les types d'entrée tels que les boutons radio et les

cases à cocher peuvent utiliser la valeur à d'autres fins. L'option model peut éviter de tels conflits :

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>

Le code ci-dessus est équivalent à :

<my-checkbox
 :checked="foo"
 @change="val => { foo = val }"
 value="some value">
</my-checkbox>

Notez que vous devez toujours déclarer explicitement l'accessoire coché.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser xe-utils dans vue

vue-router n'affiche pas les itinéraires lors de la construction Comment gérer la page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!