Comment 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 est juste un sucre de syntaxe, qui est étendu à :

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

2.modificateur .sync

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

Ceci est aussi un sucre de syntaxe, le décoller est :

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

Le composant My-dialog peut être this.$emit('update:visible', newVisible) lorsque des changements sont 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 }
  })
 }
}

Ça devrait être comme ça :

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

Cependant, l'utilisation des attributs du modèle peut être complètement ignorée à des fins d'accessoires et d'événements :

{
 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 existe une demande comme celle-ci : développez un composant Prompt pour exiger la synchronisation des entrées des utilisateurs, cliquez sur le bouton pour fermer la fenêtre contextuelle.

Généralement, nous faisons 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>

C'est bien d'écrire un ou deux composants, Une fois que la taille du composant augmente, l’écriture d’une liaison bidirectionnelle peut réellement poser 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>

vue- better-sync unifie la façon dont v-model et .sync transmettent les données. Vous n'avez besoin que de this.actual${PropName} = newValue ou this.sync${PropName}(newValue) pour transmettre de nouvelles données au composant parent.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction à la fonction de vue permettant de recadrer les images et de les télécharger sur le serveur

Comment configurer Sass en vue échafaudage

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!