What are the methods for implementing two-way binding in Vue?

Vue implements two-way binding: 1. Use the v-model instruction to implement binding. The v-model on the custom component is equivalent to passing the modelValue prop and receiving the thrown update:modelValue event; 2 , use the vue-better-sync plug-in to implement binding; 3. Use the v-bind.sync modifier, the syntax is "".

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Vue several methods to implement two-way binding

1. v-model directive

<childcomponent></childcomponent>

<!-- 是以下的简写: -->

<childcomponent></childcomponent>

If you want to add attributes Or the event name is changed to another name, you need to add the model option in the ChildComponent component:

<!-- ParentComponent.vue -->

<ChildComponent v-model="pageTitle" />

// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

So, in this example v-model is the abbreviation of:

<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

In Vue 3.x, v-model on a custom component is equivalent to passing the modelValue prop and receiving the thrown update:modelValue event:

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

Vue3 You can bind multiple v-model, for example: <ChildComponent v-model:title="pageTitle" v -model:name="pageName" />

2, vue-better-sync plug-in

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

Generally we will do this:

<template>
  <div v-show="_visible">
    <div>完善个人信息</div>
    <div>
      <div>尊姓大名？</div>
      <input v-model="_answer" />
    </div>
    <div>
      <button @click="_visible = !_visible">确认</button>
      <button @click="_visible = !_visible">取消</button>
    </div>
  </div>
</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 vue-better-sync wheel. Let’s see how it can be used to transform our Prompt component:

<template>
  <div v-show="actualVisible">
    <div>完善个人信息</div>
    <div>
      <div>尊姓大名？</div>
      <input v-model="actualAnswer" />
    </div>
    <div>
      <button @click="syncVisible(!actualVisible)">确认</button>
      <button @click="syncVisible(!actualVisible)">取消</button>
    </div>
  </div>
</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 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

3. Use v-bind.sync modifier

in In some cases, we may need to perform "two-way binding" on a certain prop (except for the previous case of using v-model to bind prop). For this we recommend using the update:myPropName throwing event. For example, for the ChildComponent with the title prop in the previous example, we can communicate the intention to assign a new value to the parent in the following way:

this.$emit('update:title', newValue)

If necessary, the parent can listen to the event and Update local data properties. For example:

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

For convenience, we can use the .sync modifier to abbreviate it as follows:

<ChildComponent :title.sync="pageTitle" />

vue3 Remove .sync

[Related recommendations: vuejs video tutorial, web front-end development]

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