Summary of two-way binding methods in Vue

This time I will bring you a summary of Vue's two-way binding methods. What are the precautions for Vue to implement two-way binding? The following is a practical case, let's take a look.

1. v-model command

<input v-model="text" />

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

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

2. .sync modifier

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

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

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

my-dialog component when the visible changes this.$emit('update:visible', newVisible) That's it.

3. model attribute (in JSX/rendering function)

Vue allows self-definition of components after version 2.2.0 's v-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 (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 }
  })
 }
}

This should be the case:

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

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

{
 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 to require synchronization of users 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: '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>

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 vue-better-sync wheel. Let’s see how it can be used 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 '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 unifies v-model and .sync to transfer data. method, you only need

this.actual${PropName} = newValue or this.sync${PropName}(newValue) to pass new data to the parent component.

GitHub: fjc0k/vue-better-sync

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps for vue to activate the current routing

nodejs generates QR code (the simplest)

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