Several methods of implementing bidirectional binding in Vue

1. v-model instruction <input v-model="text" />

The above example is just a grammar sugar, which is unfolded as follows:

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

2. Sync modifier

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

It's also a grammar sugar, which can be peeled:

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

When the visibility of my dialog component changes, this $emit ('update: visible ', newvisible) is enough.

3. model attribute (in JSX / rendering function)

After version 2.2.0, Vue allows you to customize the v-model of a component, which leads to the consideration of different configurations of components when implementing v-model in JSX / rendering functions (if the model of my dialog component is {prop: 'visible', event: 'change'}):

{
 render(h) {
  return h('my-dialog', {
   props: { value: this.dialogVisible },
   on: { input: newVisible => this.dialogVisible = newVisible }
  })
 }
}
//Front end full stack learning communication circle: 866109386
//For front-end developers with 1-3 years of experience
//Help to break through technical bottleneck and improve thinking ability

Instead:

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

However, by using the model attribute, we can completely achieve the purpose of regardless of its prop and event:

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

This is used in JSX:

{
 render() {
  return (
   <my-dialog
    {...{
     model: {
      value: this.dialogVisible,
      callback: newVisible => this.dialogVisible = newVisible
     }
    }}
   />
  )
 }
}
//Front end full stack learning communication circle: 866109386
//For front-end developers with 1-3 years of experience
//Help to break through technical bottleneck and improve thinking ability

4. Vue better sync plug-in

There is a demand for this: to develop a Prompt component, it is required to synchronize the user's input, and click the button to close the pop-up window.

We usually do this:

<template>
 <div v-show="_visible">
  <div>Improve personal information</div>
  <div>
   <div>your name?</div>
   <input v-model="_answer" />
  </div>
  <div>
   <button @click="_visible = !_visible">confirm</button>
   <button @click="_visible = !_visible">cancel</button>
  </div>
 </div>
</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>
//Front end full stack learning communication circle: 866109386
//For front-end developers with 1-3 years of experience
//Help to break through technical bottleneck and improve thinking ability

It's OK to write one or two components. Once the component scale is expanded, writing two-way binding can really write the fault. So, in order to liberate productivity, we have the wheel Vue better sync. Let's see how to use it to transform our Prompt components:

<template>
 <div v-show="actualVisible">
  <div>Improve personal information</div>
  <div>
   <div>your name?</div>
   <input v-model="actualAnswer" />
  </div>
  <div>
   <button @click="syncVisible(!actualVisible)">confirm</button>
   <button @click="syncVisible(!actualVisible)">cancel</button>
  </div>
 </div>
</template>
<script>
import VueBetterSync from 'vue-better-sync'
export default {
 name: 'prompt',
 mixins: [
  VueBetterSync({
   prop: 'answer', // Set the prop of v-model
   event: 'input' // Set the event of v-model
  })
 ],
 props: {
  answer: String,
  visible: {
   type: Boolean,
   sync: true // The visible property can be bound in both directions with. sync
  }
 }
}
</script>

Vue better sync unifies the way v-model and. Sync deliver data. You only need this.actual${PropName} = newValue or this.sync${PropName}(newValue) to deliver new data to the parent component.

Tags: Front-end Vue Attribute

Posted on Wed, 04 Dec 2019 11:42:16 -0800 by overlordofevil