"."/> ".">

Home  >  Article  >  Web Front-end  >  What are the methods for implementing two-way binding in Vue?

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

青灯夜游
青灯夜游Original
2022-12-27 18:16:2810643browse

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

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

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: &#39;title&#39;,
    event: &#39;change&#39;
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: &#39;Default title&#39;
    }
  }
}

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

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.

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

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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn