[Vue] deeper understanding of user-defined attribute props

Due to the recent completion of study vue Working on projects , But when working on projects with , One problem I found was props The custom attribute can be read or written when it appears , And the data flow has become a two-way problem .

initial props

When I first learned , about props My understanding is Can only read but not write , At the same time, it is also used as a tool for value transfer between components , Parent component to child component One way data flow

The emergence of problems

Put code here ：



On the page vue To check the data, the data has indeed changed

But when working with others on projects , It is found that there is a two-way flow of data in the parent and child components , also eslint The specification reported an error , Check today props When documenting , The text is as follows ：
be-all prop Both make their father and son prop A one-way down binding is formed between ： Parent prop The update flows down to the child component , But not the other way around . This prevents unexpected changes to the state of the parent component from the child component , This causes your application's data flow to be difficult to understand .
Find out props The one-way flow of data is not fixed , It usually flows in one direction , But when the data is objects and arrays , Yes, two-way flow can occur

Why do two-way flows occur ？

reason ： Pay attention to JavaScript Objects and arrays are passed in by reference , So for an array or object type prop Come on , Changing the object or array itself in a child component will affect the state of the parent component .

summary

1、 In order to standardize your code writing , In the future, I will promise to take this prop Used to pass an initial value ; This subcomponent next wants to use it as a local prop When using data , Store it in data In the data ,data The data is readable and writable
2、 For the problem of two-way flow , Don't modify it directly props Value , When the parent component needs the value of the child component , Then pass the value from the child to the parent （ There is another problem here , Subsequently added ）

Add questions

It was said that props Custom attributes cannot be written , In fact, it is to limit the flow of data , So read only, not write ,
So here arrays and objects can be written .
Code proof ：

      this.tableData = this.tableData.filter((item, index) => index !== i)
      const id = this.tableData[i].id

But in the end, in order to standardize , Or saved the data to data, Code changes have been made . And there is also the problem of data asynchrony （ It has been solved in the following article ）.
If there's something wrong with what I recorded , I hope you can correct me ！！！