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

1327 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

The above example is just a syntax sugar, which is expanded to:

Copy after login

2. .sync modifier

Copy after login

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

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 (
    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:

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:

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!