current position:Home>[Vue] deeper understanding of user-defined attribute props

[Vue] deeper understanding of user-defined attribute props

2022-05-15 02:10:10Triumph-light

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 :
 Insert picture description here
 Insert picture description here
 Insert picture description 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 .


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 !!! Insert picture description here

copyright notice
author[Triumph-light],Please bring the original link to reprint, thank you.

Random recommended