Directly modifying the value in props in vue does not give a warning. Why?

when explaining the one-way data flow of props, the vue official website mentioned:

in addition, each time the parent component is updated, all prop in the child component will be refreshed to the latest value. This means that you should not change the prop within a subcomponent. If you do, Vue will issue a warning in the browser"s console.

but I tested and directly modified the value of props without giving any warning.
have you met anyone?

Vue.js
Apr.07,2021

? Here comes Chestnut, please check

parent component 
<template>
    <div>
        <child :data="data" :obj="obj"/>
        <h1>data: {{data}}</h1>
        <h1>objData: {{obj.data}}</h1>
    </div>
</template>

<script>
import child from './child'
export default {
    data(){
        return {
            data: '',
            obj: {
                data: ''
            }
        }
    },
    components: { child }
}
</script>
subcomponents 
<template>
    <div>
        <button @click="change">click to change prop data</button>
        <button @click="changeObjData">click to chnage prop objData</button>
    </div>
</template>
<script>
export default {
    props: ['data', 'obj'],
    methods: {
        change(){
            this.data = Math.random()
        },
        changeObjData(){
            this.obj.data = Math.random()
        }
    }
}
</script>

two buttons, one is prop that changes the value type, and the other is prop that changes the reference type of . You will find that the first button will report an error and the value will not be changed, but when you press the second button, the value will change and no error will be reported. That is because what your parent component passes is only a reference. To put it bluntly, it passes a memory address (pointer), and the child component changes the above value. The pointer is not changed, so the system assumes that it does not cause a change in the value of the parent component, so there is no error prompt.

move on 

 prop :

Prop ;

Prop 

:

 prop :

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

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

if the value passed in by props is a reference type, change its element in the child component without changing the reference, then no error is reported.
if it is an ordinary type, then the browser console will report an error message when modifying

one-way data browsing does not allow you to modify. If you can modify it, each component can operate on the data, so it cannot effectively track the changes of the data

.

Previous: How to determine the font of vertical-align:text-top parent element

Next: How does new promise terminate chained calls?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu