Shulou(Shulou.com)05/31 Report--

This article focuses on "how to achieve two-way data binding in Vue", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to achieve two-way data binding in Vue"!

Implement two-way data binding of components

The final example in the previous section uses .sync in Vue version 1.0 to implement two-way data binding. Let's first look at the work of abandoning the .sync modifier to achieve bi-directional data binding of components: through the mechanism provided by Vue, bi-directional data binding of components can be achieved by bypassing the direct modification of prop.

The idea goes something like this:

Use prop to render data when rendering data

Bind prop to the data of the child component itself, and modify your own data to replace prop when you modify the data

The watch child component changes its own data, triggering an event 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 the prop will not be modified, but the bidirectional modification of the prop will be completed by using the child component data as the medium.

Continue to use the example in 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:

Parent component Parent data name: {{name}} Age: {{age}} Child component child data name {{myName}} Age {{myAge}}

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

The data rendered to the HTML template in the subcomponent is the prop data, but the listening input is using the data defined by the subcomponent itself as the v-model. In this way, the prop will not be modified directly. To put it simply, all prop changes are essentially done by the parent component. The code for JavaScript is as follows:

Let parent = new Vue ({el:'# app', data () {return {name: 'w3C pluses, 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 effect of the above example, whether it is modifying the data of the parent component or the data of the child component, affects each other:

Because the myName and myAge of props in the subcomponents are not writable, create a copy of childMyName and childMyAge in data. The initial values are the values of the props properties myName and myAge, and childMyName and childMyAge in the data are called all the places in the component where props is needed.

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

Next, listen to the myName and myAge of the props property through watch in the subcomponent. When the props is modified, the corresponding replicas childMyName and childMyAge in the data should 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 property within the component changes, you need to send a notification outside the component (the parent component) to notify the property change within the component, and then it is up to the outer layer (the parent component) to decide whether or not to change its data.

Next, let's follow the above scenario to modify the switch button in the example in the previous section.

So far, it realizes the two-way binding of the data inside the component and the data outside the component, and the synchronization of the data inside and outside the component. In short: the inside of the component changes and tells the outside that the outside decides whether or not to change.

What kind of props is suitable for bidirectional binding

In fact, in Vue, bi-directional binding props is not conducive to data state management between components, especially in more complex businesses, so in actual projects, bidirectional binding should be used as little as possible, too complex data processing, it is recommended to use Vuex. But in many cases, the use of two-way binding can not be avoided. So what are the scenarios in which props is used for two-way binding?

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

Props needs to be modified inside the component

Components need to be dynamically controlled by the outside at run time, rather than simply initialized

The parent of the component needs to read the state within the component for processing

Although the above example shows how we can implement two-way binding of props in Vue 2.0, if there are more such two-way bindings in the project, it will make you do something repetitive, the code will be redundant, and things will become complicated. To change this, you can automate the need for two-way binding of props with the help of Vue's mixin. However, in this section, we will not learn about this, and later when we learn about mixin, we can go back to achieve this function.

At this point, I believe you have a deeper understanding of "how to achieve two-way data binding in Vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.