Vue2.0 implements bidirectional binding of component data, and vue2.0 binds Components

Vue2.0 implements bidirectional binding of component data, and vue2.0 binds Components

Through the learning in the previous section, we learned about data transmission in the Vue component: prop downward transmission, and event upward transmission. It means that the parent component sends data to the child component through prop, and the child component sends messages to the parent component through events. However, in Vue, props is one-way data binding, although in Vue 1.0, two-way Data Binding can be achieved through. sync. However,. sync is removed from several versions. Although the. sync modifier is re-introduced in Version 2.3, this introduction only exists as a syntactic sugar during compilation. If the. sync modifier is used directly for two-way data binding, a warning is reported. So how do we implement bidirectional data binding in components? In this section, we will learn the relevant knowledge.

Implement bidirectional data binding of components

The last example in the previous section uses. sync in Vue 1.0 to implement bidirectional data binding. Let's take a look at the work of discarding the. sync modifier to bind two-way data to components: By using the mechanism provided by Vue, you can bypass the direct modification of prop to bind two-way data to components.

The idea is roughly as follows:

• Use prop to render data during Data Rendering
  
• Bind the prop to the data of the Child component, and modify the data to replace the prop.
  
• When the data of the watch sub-component changes, an event is triggered to notify the parent component to change the data bound to the prop.
  

The advantage of this is that when the parent component data changes, the child component data stored in prop will not be modified, but the child component data is used as the media to complete two-way modifications to prop.

The example in the previous section is used as an example, but the following example does not use. sync for bidirectional data binding.

The modified code is as follows:

<Div id = "app"> <div class = "parent"> 
In the preceding example, The. sync modifier is not used, but @ update is used when the sub-component is called:
<child :my-name="name" :my-age="age" @update:my-name="val => name = val" @update:my-age="val => age = val"></child>
The data rendered to the HTML template in the child component uses the prop data, but the listening input uses the data defined by the Child component as the v-model. In this way, the prop will not be directly modified. Simply put, all changes to prop are essentially done by the parent component. The JavaScript code is as follows:
let parent = new Vue({ el: '#app', data () {  return {   name: 'w3cplus',   age: 7  } }, components: {  'child': {   template: '#child',   props: ['myName', 'myAge'],   data () {    return {     childMyName: this.myName,     childMyAge: this.myAge    }   },   watch: {    childMyName: function (val) {     this.$emit('update:my-name', val)    },    childMyAge: function (val) {     this.$emit('update:my-age', val)    }   }  } }})
The final result is as follows:
In the preceding example, data of the parent component or sub-component are mutually affected:
 
Because the myName and myAge of props in the child component cannot be written, create a copy of childMyName and childMyAge in data. The initial values are the values of the props attributes myName and myAge, And the childMyName and childMyAge in data are called in all the places in the component where props needs to be called.
components: { 'child': {  template: '#child',  props: ['myName', 'myAge'],  data () {   return {    childMyName: this.myName,    childMyAge: this.myAge   }  },  ... }}
Next, you can use watch to monitor the myName and myAge of the props attribute in the child component. After the props is modified, the corresponding data copies childMyName and childMyAge also need to be synchronized.
...watch: { childMyName: function (val) {  this.$emit('update:my-name', val) }, childMyAge: function (val) {  this.$emit('update:my-age', val) }}...
The next thing to do is to send a notification to the external component (parent component) to notify the internal attribute change of the component when the props attribute in the component changes. Then, the external component (parent component) decide whether to change his data.
Next, follow the above scheme to transform the switch button in the previous example.
At this point, the internal data of the component is bound to the external data of the component, and the internal and external data of the component is synchronized. In short: the component itself has changed, telling the external, the external decide whether to change.
 
What kind of props is suitable for Bidirectional binding?
In fact, in Vue, two-way binding of props is not conducive to data status management between components, especially in complicated businesses. Therefore, we should try to use less two-way binding in actual projects, vuex is recommended for complex data processing. However, in many cases, two-way binding cannot be avoided. In what scenarios will props be used for two-way binding?
If the following conditions are met in your project, we can consider using props for Bidirectional binding:

 
 
 
  
The props must be modified inside the component.
 
 
  
Components need to be dynamically controlled by external entities during runtime, rather than initialization.
 
 
  
The component parent needs to read the status in the component for processing.

 
Although the preceding example shows how to implement two-way props binding in Vue 2.0, if there are more such two-way bindings in the project, you will be asked to repeat things, in addition, the Code is redundant and complicated. To change this phenomenon, you can use the mixin of Vue to automate the two-way binding of props. However, in this section, we will not learn about this aspect. Later, when we are learning mixin, we can go back and implement this function.
In addition to the component communication described above, there are other methods in Vue. In the next section, we will continue to learn about this.
Summary
The above section describes how to bind component data in Vue2.0. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!