Méthode du composant d'entrée de formulaire de l'événement personnalisé Vue.js

Ci-dessous, je vais partager avec vous une méthode de composant de saisie de formulaire pour les événements personnalisés Vue.js. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

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

Des événements personnalisés peuvent être utilisés pour créer des composants d'entrée de formulaire personnalisés, en utilisant le modèle V 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 personnalisé très simple pour la saisie de devise : -- Reportez-vous au modèle de composant enfant dans le composant parent. Utilisez les données de liaison du 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>\
 &#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))
  }
 }
})

Le v-model

2.2.0 du composant personnalisé a été ajouté.

Par défaut, le modèle v d'un composant utilisera la valeur prop et les é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é.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Une brève discussion sur les composants d'ordre supérieur de React

Méthode de requête vue-cli axios et traitement inter-domaines issues

jQuery implémente la fonction de saut entre les navigateurs et de transmission de paramètres [prend en charge les caractères chinois]

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!