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

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

亚连

Libérer： 2018-05-31 16:32:54

original

1554 Les gens l'ont consulté

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">

Copier après la connexion

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

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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(&#39;my-checkbox&#39;, {
 model: {
  prop: &#39;checked&#39;,
  event: &#39;change&#39;
 },
 props: {
  checked: Boolean,
  // 这样就允许拿 `value` 这个 prop 做其它事了
  value: String
 },
 // ...
})

Copier après la connexion

<my-checkbox v-model="foo" value="some value"></my-checkbox>

Copier après la connexion

Le code ci-dessus est équivalent à :

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

Copier après la connexion

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.