A brief discussion on Props (one-way data flow) in vue.js

prop is one-way binding: when the properties of the parent component change, it will be transmitted to the child component, but not the other way around. This is to prevent child components from inadvertently modifying the parent component's state - which would make the application's data flow difficult to understand.

In addition, every time the parent component is updated, all props of the child component will be updated to the latest values. This means you should not change props inside child components. If you do this, Vue will warn you in the console.

There are usually two situations in which prop is changed:

1. prop is passed in as an initial value, and the subcomponent just uses its initial value as the initial value of local data. ;

2. prop is passed in as the original value that needs to be transformed.

More precisely, these two situations are:

1. Define a local data attribute and use the initial value of prop as the initial value of the local data.

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

2. Define a computed attribute, which is calculated from the value of prop.

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

Note that in JavaScript, objects and arrays are reference types, pointing to the same memory space. If prop is an object or array, changing it inside the child component will affect the state of the parent component.

English original address: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

##Related recommendations:

2020 Summary of front-end vue interview questions (with answers)

vue tutorial recommendation: 2020 latest 5 vue.js video tutorial selection

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of A brief discussion on Props (one-way data flow) in vue.js. For more information, please follow other related articles on the PHP Chinese website!