Will the vue subcomponent be updated in real time when it passes values to the parent component?

encountered such a problem in the vue project:

triggers an event of the child component, in which the emit triggers the custom event of the parent component and sends an array to the parent component.
after getting the array in the custom event in the parent component, it assigns a value to a variable defined in data, and then uses this variable to render a list.
the child component from beginning to end is only emit once in the whole code, that is, the parent component only accepts the array of child components once, and assigns a value to data only once after getting it.

but here comes the problem. I modified the array contents of the child component (push,splice), and the list in the parent component changed, so what happened?

then I wrote a demo, and found that if you pass a numeric value or string and modify it in the child component, the content in the parent component will not change.

is there anyone with this kind of problem? Find the solution

Html5 javascript
Mar.04,2022

because the array is a reference type and the numeric or string is the basic type, a change in the reference type will cause a chain reaction. If you really don't want to change it, make a deep copy to the parent component when you emit 



splice<br>data<br>this.XXX=XXXXXX;<br>this.arr = [XXX]<br>thisthis.<br><br>jssplicethis.arr = arr.splice()    <br> arr.splice()



<ol>
<li> <child :str.sync="this.str" /><br> this.$emit('update:str','')</li>
<li>

 <child v-on:str="getChild" /><br> data:{


 return {
     str:'XXX'
 }


} 
 methods: {


 getChild(val){
     this.str = val
 }


} 


 subcomponent 
 this.$emit ('str',' new character') 



  •  vuex 
    •

    Previous: Does Cache-Control:no-cache support this setting?

    Next: My vue-cli appeared after the introduction of vux, but I couldn't find the app module.

    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