Props error reporting or problem solving in Vue

一、[Vue warn]: The data property "inputUserData" is already declared as a prop. Use prop default value instead.

Meaning: The value "inputUserData" has been declared as a prop data. When mounting, the "inputUserData" in the prop will be used by default.

Reason for the error: It was declared once in props and again in the data attribute.

Solution: Delete "inputUserData" in the data attribute.

 

二、[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "inputUserData"

Meaning: Avoid modifying the value in prop. It is recommended to modify "inputUserData" with a value based on "inputUserData" or a calculated property.

Reason for error:

In the subcomponent, the value "inputUserData" is placed in the v-model attribute, and there is a risk of being overwritten by modifications. The latter may be modified in other ways, such as calling a method to change the value in "inputUserData".

Measures: If "inputUserData" in prop receives the initial value, it will be processed. It can be placed in a calculated attribute for processing, or placed in another field such as ""inputUserDataCopy" to receive the "inputUserData" value, and then directly inputUserDataCopy" to operate

3. When solving the prop problem, try to use this.$parent.[Value on the parent component] to obtain the data on the parent component. Common problems encountered: this.$parent.[Value on the parent component] returns undefind .

Reason: You used the B local subcomponent in the A local component, but wrapped the B local subcomponent in more than one elementUI and other third-party components. In other words, this local B component has N parent components. Purely Using this.$parent.[value on the parent component], you only call one layer of data on the parent component.

Measures: Print console.log(this.$parent) at the corresponding location of the subcomponent, and then search under $parent layer by layer, and you will find the data you want. If you want to get it, just click $parent and use it, such as a two-layer parent component, then use this.$parent.$parent.value.

 

Guess you like

Origin blog.csdn.net/qq_50276105/article/details/133321869