Résumé des méthodes de liaison bidirectionnelle dans Vue

Cette fois, je vais vous apporter un résumé de la méthode de liaison bidirectionnelle de Vue. Quelles sont les précautions pour que Vue implémente la liaison bidirectionnelle. Ce qui suit est un cas pratique, prenons un. regarder.

1. Commande v-model

<input v-model="text" />

L'exemple ci-dessus n'est qu'un sucre syntaxique une fois développé. , c'est :

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

2.modificateur .sync

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

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

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

Le composant My-dialog peut être this.$emit('update:visible', newVisible) lorsque des modifications sont visibles.

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

Vue autorise les composants auto-définis après la version 2.2.0 ' s v-model, ce qui 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 (si le modèle du composant my-dialog est { 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

Si nécessaire : développez un composant d'invite qui nécessite une entrée utilisateur synchronisée et clique 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: 'prompt',
 props: {
  answer: String,
  visible: Boolean
 },
 computed: {
  _answer: {
   get() {
    return this.answer
   },
   set(value) {
    this.$emit('input', value)
   }
  },
  _visible: {
   get() {
    return this.visible
   },
   set(value) {
    this.$emit('update:visible', 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 'vue-better-sync'
export default {
 name: 'prompt',
 mixins: [
  VueBetterSync({
   prop: 'answer', // 设置 v-model 的 prop
   event: 'input' // 设置 v-model 的 event
  })
 ],
 props: {
  answer: String,
  visible: {
   type: Boolean,
   sync: true // visible 属性可用 .sync 双向绑定
  }
 }
}
</script>

vue-better-sync unifie le v-model et livraison .sync En termes de données, il vous suffit de transmettre de nouvelles données au composant parent en utilisant

ou this.actual${PropName} = newValue . this.sync${PropName}(newValue)

GitHub : fjc0k/vue-better-sync

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 PHP !

Lecture recommandée :

Explication détaillée des étapes pour activer le routage actuel avec vue

nodejs génère un code QR ( le plus simple)

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!