Quatre façons d'implémenter la liaison bidirectionnelle dans Vue

Cet article présente principalement les quatre méthodes d'implémentation de la liaison bidirectionnelle dans Vue. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

1. v-model La commande

<input v-model="text" />

L'exemple ci-dessus n'est qu'un sucre de syntaxe, qui est étendu à :

<input
 :value="text"
 @input="e => text = e.target.value"
/>

2 .sync modificateur

<my-dialog :visible.sync="dialogVisible" />

C'est aussi un sucre de syntaxe, décollé c'est :

<my-dialog
 :visible="dialogVisible"
 @update:visible="newVisible => dialogVisible = newVisible"
/>

Le composant My-dialog peut être this.$emit('update:visible', newVisible) quand. changements visibles.

3. Attribut de modèle (dans JSX/fonction de rendu)

Vue après la version 2.2.0, permet le v-model de composants personnalisés, cela conduit à la nécessité de considérer différentes configurations de composants lors de l'implémentation du v-model dans les fonctions JSX/rendu, ce qui ne peut pas toujours être le cas (supposons que le modèle du composant my-dialog soit { prop: 'visible', event: 'change ' }) :

{
 render(h) {
  return h('my-dialog', {
   props: { value: this.dialogVisible },
   on: { input: newVisible => this.dialogVisible = newVisible }
  })
 }
}

Cela devrait être comme ceci :

{
 render(h) {
  return h('my-dialog', {
   props: { visible: this.dialogVisible },
   on: { change: newVisible => this.dialogVisible = newVisible }
  })
 }
}

Cependant, en utilisant l'attribut model, vous pouvez complètement ignorer son accessoire et son événement :

{
 render(h) {
  return h('my-dialog', {
   model: {
    value: this.dialogVisible,
    callback: newVisible => this.dialogVisible = newVisible
   }
  })
 }
}

Utilisé comme ceci dans JSX :

{
 render() {
  return (
   <my-dialog
    {...{
     model: {
      value: this.dialogVisible,
      callback: newVisible => this.dialogVisible = newVisible
     }
    }}
   />
  )
 }
}

4. plug-in vue-better-sync

Il y a une demande comme ceci : développez un composant Prompt, exigez Synchronisez la saisie de l'utilisateur et cliquez sur le bouton pour fermer la fenêtre contextuelle.

Généralement, nous ferons ceci :

<template>
 <p v-show="_visible">
  <p>完善个人信息</p>
  <p>
   <p>尊姓大名？</p>
   <input v-model="_answer" />
  </p>
  <p>
   <button @click="_visible = !_visible">确认</button>
   <button @click="_visible = !_visible">取消</button>
  </p>
 </p>
</template>
<script>
export default {
 name: &#39;prompt&#39;,
 props: {
  answer: String,
  visible: Boolean
 },
 computed: {
  _answer: {
   get() {
    return this.answer
   },
   set(value) {
    this.$emit(&#39;input&#39;, value)
   }
  },
  _visible: {
   get() {
    return this.visible
   },
   set(value) {
    this.$emit(&#39;update:visible&#39;, value)
   }
  }
 }
}
</script>

Vous pouvez écrire un ou deux composants une fois la taille du composant développée, en écrire deux. -way la liaison peut vraiment causer des problèmes. Ainsi, afin de libérer la productivité, nous avons la roue de vue-better-sync, et voyons comment l'utiliser pour transformer notre composant Prompt :

<template>
 <p v-show="actualVisible">
  <p>完善个人信息</p>
  <p>
   <p>尊姓大名？</p>
   <input v-model="actualAnswer" />
  </p>
  <p>
   <button @click="syncVisible(!actualVisible)">确认</button>
   <button @click="syncVisible(!actualVisible)">取消</button>
  </p>
 </p>
</template>
<script>
import VueBetterSync from &#39;vue-better-sync&#39;
export default {
 name: &#39;prompt&#39;,
 mixins: [
  VueBetterSync({
   prop: &#39;answer&#39;, // 设置 v-model 的 prop
   event: &#39;input&#39; // 设置 v-model 的 event
  })
 ],
 props: {
  answer: String,
  visible: {
   type: Boolean,
   sync: true // visible 属性可用 .sync 双向绑定
  }
 }
}
</script>

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

Articles connexes :

jQuery+Cookie implémente la fonction de changement de skin

JQuery a implémenté un exemple de fonction d'événement de bouton de déclenchement d'entrée

Exemple d'implémentation de la vérification Ajax basée sur jQuery pour vérifier si le nom d'utilisateur est disponible

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!