We all know that props value is read-only and cannot be modified directly in the child component, and an error will be reported.
However, many times this value needs to be automatically modified by the child component. Generally, we will use this.$emit() to modify it, but it is more troublesome.
The following method can be achieved:
1. When the parent component modifies the props value in real time, the child component can receive changes.
2. The subcomponent can actively modify the value
<div>{{RealValue}}</div>
props: [ "value" ],
watch: {
value (v) {
= v
}
},
data () {
return {
RealValue:
}
}
The principle is very simple, it is to use a RealValue as the actual display parameter, and use watch to pass the value value to it in real time.
PS: The value here is in string format. If the value is an object or an array, the watch should be written as:
watch: {
value:{
deep: true,
handler(v) {
= v
}
}
},
Supplementary knowledge:The problem of watching the numerical value in the vue component is not available for the first time.
Many subcomponents are used in vue. Sometimes, data cannot be listened to due to the type of component. Here are a few problems and solutions
When the data in the child component is not listened to for the first time, you can use the [immediate] method, which is true or false; immediate:true means that if it is declared in wacth, you will immediately execute the handler method.
watch:{
uploadImageUrl:{
immediate:true,
handler:function(newval){
= newval;
}
}
},
The deep listening function of the child component [deep], whose value is true or false; confirm whether to listen in depth. deep means to observe in depth. The listener will traverse down layer by layer, adding this listener to all the properties of the object (due to the limitations of modern JavaScript (and discarded), Vue cannot detect the addition or deletion of object properties)
watch:{
uploadImageUrl:{
deep:true,
handler:function(newval){
= newval;
}
}
},
Set default values for the data of the object for the props within the component
If the data received in the prop is an object or array type, it cannot directly specify the default value like a string, etc., and the error will be reported as follows. The correction method is as follows.
defaultProp: {
type: Object,
default: function(){
return {
children: 'children',
label: 'name'
}
}
},
The above article Vue passes props value in real time and can be modified is all the content I share with you. I hope you can give you a reference and I hope you can support me more.