Summary of two-way binding methods in Vue-JS Tutorial-php.cn

Summary of two-way binding methods in Vue

php中世界最好的语言

Release： 2018-05-10 15:12:07

Original

1566 people have browsed it

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

Copy after login

2. .sync modifier

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

Copy after login

This It 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 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 }
  })
 }
}

Copy after login

This should be the case:

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

Copy after login

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
   }
  })
 }
}

Copy after login

Used like 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 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>

Copy after login

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>

Copy after login

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!