How Vue2.0 implements two-way binding of component data

This time I will show you how Vue2.0 implements two-way binding of component data. What are the precautions for Vue2.0 to implement two-way binding of component data? The following is a practical case, let’s take a look together. take a look.

Through the study in the previous section, we learned about data transmission in Vue components: props are passed downwards, and events are passed upwards. This means that the parent component sends data to the child component through props, and the child component sends messages

to the parent component through events. But in Vue, props is one-way data binding, although in Vue version 1.0, two-way data binding can be achieved through .sync. But .sync was removed in several versions. Although the .sync modifier was reintroduced in version 2.3, it was introduced this time only as a compile-time syntactic sugar. If you directly use the .sync modifier for two-way data binding, a warning message will be reported. So how do we implement two-way data binding in components? In this section we will learn some relevant knowledge in this area.

Implementing component two-way data bindingThe last example in the previous section uses the .sync implementation data in Vue version 1.0 Two-way binding. Then let's first look at the work of abandoning the .sync modifier to implement two-way data binding of components: Using the mechanism provided by Vue, we can bypass directly modifying prop to achieve two-way data binding of components.

The idea is roughly like this:

Use prop to render data when rendering data
Bind prop to child For the component's own data, when modifying the data, modify its own data to replace the prop
watch the change of the child component's own data and trigger an event to notify the parent component to change the data bound to the prop
The advantage of this is: When the parent component data changes, the sub-component data that stores the prop will not be modified, but the sub-component data is used as the medium to complete the two-way modification of the prop.

Continue to take the example from the previous section, but the following example does not use .sync to achieve the effect of two-way data binding.

The modified code is as follows:

<p id="app">
 <p class="parent">
  <h3>父组件Parent数据</h3>
  <ul>
   <li>
    <label>姓名:</label>
    <span>{{ name }}</span>
    <input type="text" v-model="name" />
   </li>
   <li>
    <label>年龄:</label>
    <span>{{ age }}</span>
    <input type="number" v-model="age" />
   </li>
  </ul>
 </p>
 <child :my-name="name" :my-age="age" @update:my-name="val => name = val" @update:my-age="val => age = val"></child>
</p>
<template id="child">
 <p class="child">
  <h3>子组件child数据</h3>
  <ul>
   <li>
    <label>姓名</label>
    <span>{{ myName }}</span>
    <input type="text" v-model="childMyName" />
   </li>
   <li>
    <label>年龄</label>
    <span>{{ myAge }}</span>
    <input type="number" v-model="childMyAge" />
   </li>
  </ul>
 </p>
</template>

In the above example, we did not use the .sync modifier, but used @update when calling the subcomponent:

<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 subcomponent uses prop data, but the listening input uses the data defined by the subcomponent itself as v-model. This way prop won't be modified directly. Simply put, all prop changes are essentially completed by the parent component. The code of

JavaScript

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 effect is as follows:

The above example effect, whether it is modifying the data of the parent component or the data of the child component, will affect each other:

Because myName and myAge of props in the child component are not writable, create a copy of childMyName and childMyAge in data. The initial values ​​are the values ​​of the props attributes myName and myAge, and childMyName and childMyAge in the data are called wherever props need to be called in the component.

components: {
 'child': {
  template: '#child',
  props: ['myName', 'myAge'],
  data () {
   return {
    childMyName: this.myName,
    childMyAge: this.myAge
   }
  },
  ...
 }
}

Next, use watch in the subcomponent to monitor the myName and myAge of the props attribute. When the props are modified, the corresponding copies of childMyName and childMyAge in the data must also synchronize the data.

...
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 that when the props attribute within the component changes, a notification needs to be sent outside the component (parent component) to notify the property changes within the component, and then the outer layer (parent component) itself to decide whether to change his data.

Next, we will transform the

switch

button in the example in the previous section according to the above plan. At this point, the two-way binding of the internal data of the component and the data outside the component is realized, and the synchronization of data inside and outside the component is achieved. In short: When a component changes internally, it tells the outside world, and the outside world decides whether to change it.

What kind of props are suitable for two-way binding

In fact, in Vue, two-way binding props are not conducive to data state management between components, especially in more complex businesses. Therefore, in actual projects, two-way binding should be used as little as possible. Overly complex data For processing, it is recommended to use Vuex. But many times it is unavoidable to use two-way binding. So in what scenarios do you use props for two-way binding?

If in your project, the following conditions are met at the same time, we can consider using props for two-way binding:

• Props need to be modified inside the component

• The component needs to be dynamically controlled by the outside at runtime, rather than simply initialized

• The component parent needs to read the state within the component. Process

Although the above example shows how we implement two-way binding of props in Vue 2.0, if there are more such two-way binding in the project, it will make You do some repetitive things, and the code is redundant, and things get complicated. In order to change this phenomenon, you can use Vue's mixin to automatically handle the need for two-way binding of props. However, in this section, we will not learn this knowledge. When we learn mixin later, we can go back to implement such a function.

In addition to the component communication introduced above, there are other methods in Vue. In the next section, we will continue to learn this knowledge.

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!

Recommended reading:

The use of v-for index index in html

What are the packaging paths for vue+webpack question

The above is the detailed content of How Vue2.0 implements two-way binding of component data. For more information, please follow other related articles on the PHP Chinese website!