Several ways to achieve bidirectional binding in Vue

1. V – model instruction

<input v-model="text" />

The above example is just a syntactic sugar.

<input :value=”text”

@input=”e => text = e.target.value” />

2. .sync modifier This is also a syntactic sugar, peeled off:

` <my-dialog :visible=”dialogVisible”

@update:visible=”newVisible => dialogVisible = newVisible” />`

$emit(‘ Update :visible’, newVisible) the my-Dialog component will emit if visible changes.

3. After version 2.2.0, Vue allows you to customize the v-Model of a component. This results in different configurations of components being considered when implementing v-Models in JSX/ rendering functions. This cannot always be the case (if 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 the code

}}

Instead:

{

render(h) {

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

}}

However, with the model attribute, it is possible to ignore the purpose of prop and event:

{

render(h) {

return h('my-dialog', {
  model: {
    value: this.dialogVisible,
    callback: newVisible => this.dialogVisible = newVisible
  }
})
Copy the code

}}

JSX is used like this:

{

render() {

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

}}