Four ways to implement two-way binding in Vue

This article mainly introduces the four methods of Vue to achieve two-way binding. It is very good and has reference value. Friends who need it can refer to it

1. v-model Instruction

<input v-model="text" />

The above example is just syntax sugar, which is expanded to:

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

2. .sync modifier

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

This is also a syntax sugar, peeled off it is:

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

my-dialog component when visible changes this.$emit('update:visible', newVisible) is enough.

3. model attribute (in JSX/rendering function)

Vue allows custom component v- after version 2.2.0 model, this leads to the need to consider different configurations of components when implementing v-model in JSX/rendering functions, which cannot always be the case (suppose the model of the my-dialog component is { prop: 'visible', event: 'change' }):

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

This should be the case:

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

However, using the model attribute, you can completely ignore its prop and event purposes:

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

Used like this in JSX:

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

4. vue-better-sync plug-in

There is a demand for this: develop a Prompt component that requires synchronization of user input. Click the button to Close the pop-up window.

Generally we will do this:

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

It’s okay to write one or two components. Once the size of the component is expanded, writing two-way binding can really cause problems. So, in order to liberate productivity, we have the wheel of vue-better-sync, and let’s see how to use it to transform our Prompt component:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

jQuery Cookie implements skin switching function

jQuery implementation of enter trigger button event function example

Example of implementing Ajax to verify whether the user name is available based on jQuery

The above is the detailed content of Four ways to implement two-way binding in Vue. For more information, please follow other related articles on the PHP Chinese website!