How to implement two-way binding in Vue-JS Tutorial-php.cn

How to implement two-way binding in Vue

不言

Release： 2018-06-29 14:55:02

Original

2102 people have browsed it

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 Command

<input v-model="text" />

The above example is just syntactic sugar. When expanded, it is:

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

Copy after login

2. .sync modifier

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

Copy after login

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

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

Copy after login

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

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(&#39;my-dialog&#39;, {
   props: { value: this.dialogVisible },
   on: { input: newVisible => this.dialogVisible = newVisible }
  })
 }
}

Copy after login

It should be like this:

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

Copy after login

However, using the model attribute, it is completely possible To achieve the purpose of not caring about props and events:

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

Copy after login

Use this in JSX:

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

Copy after login

4. vue-better-sync plug-in

There is a demand for this: develop a Prompt component that requires synchronization of user input and clicks 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>

Copy after login

It’s okay to write one or two components, but the component size Once expanded, writing two-way bindings can really cause problems. So, in order to liberate productivity, we have the vue-better-sync wheel. 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>

Copy after login

vue-better- sync unifies the way v-model and .sync transfer data. You only need to this.actual${PropName} = newValue or this.sync${PropName}(newValue) that is New data can be passed to the parent component.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

vue Introduction to the function of cropping images and uploading them to the server

How to configure Sass in vue scaffolding

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