vue 子组件不用传递参数即可修改父组件中的值的方法

父组件代码：

<template>
  <div id="app">
      <test :user="user" @func="parentFunc()"/>
  </div>
</template>
<script>
    import test from "./components/test"
  export default {
    name: 'app',
	  data(){
    	return{
		  user:[
		  	{name:"jjw",age:18,sex:"boy"},
            {name:"zhangsan",age:28,sex:"boy"},
            {name:"lisi",age:20,sex:"boy"},
          ]
	    }
	  },
      components:{
		  test,
      },
      created(){
    	console.log("parent",this.user)
      },
      methods:{
		  parentFunc:function () {
              console.log("parentFunc",this.user)
		  }
      },
  }
</script>
<style >
</style>

子组件代码：

<template>
</template>
<script>
	export default {
		name: "test",
        props:{
            user:Array,
        },
        mounted() {
            console.log("sunComponent",this.user)
            this.user.map((item)=>{
                item.age+=10;
                return item
            })
            console.log("map after",this.user)
            this.$emit("func")
		}
	}
</script>
<style scoped>
</style>

函数执行的结果 

从观察结果来看确实是子组件把把父组件中的数组中的值给改了，不过要注意这里传递的是数组或者是对象，如果传递的是一个字段比如bool值或者是一个字符串，结果不一定，还没试验，但是还有一个问题就是为啥父组件和子组件第一次打印的时候的结果（没修改之前的结果）和修改后的结果是一样的？有待探究

补充：父标签中用this.$options.data()获取到的就是没有改变之前的数据

created(){
    	console.log("parent",this.$options.data().user)
    	console.log("parent",this.user)
},

结果如下：