"."/> ".">
Home > Article > Web Front-end > 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.
<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 multiplev-model
, for example:<childcomponent v-model:title="pageTitle" v></childcomponent>
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: '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> <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 '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
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!