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

This time I will bring you a summary of Vue's two-way binding methods. What are theprecautionsfor 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 changesthis.$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} = newValueorthis.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!