遇到一个问题，记录一下！

vue中父组件给子组件传值一般都用props传值，那么在父组件给子组件传值的时候，子组件可以改变父组件的值吗？

通常来说，父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

但是当父组件的传值是数组或者对象时，子组件中不仅能够直接修改，还不会报错，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

父组件代码：

<template>

  <div class="home">

    <img alt="Vue logo" src="../assets/logo.png">

    <h1>{{msg}}</h1>

    <son :son="msg"></son>

  </div>

</template>

<script>

import son from '../components/son.vue'

export default {

  data () {

    return {

      msg:{

        'name':'zs',

        'age':123

      }  

    }

  },

  components: {

    son

  }

}

</script>

子组件代码：

<template>

    <div>

        <h1>{{son}}</h1>

        <input type="text" v-model="son.name">

    </div>

</template>

<script>

export default {

    props: ['son'],

    data() {

        return {

        };

    },

    methods: {

    },

    components: {

    },

};

</script>

<style scoped lang="less">

h1{

    background-color: aqua;

}

</style>

 

上面是正常获取父组件值的情况

下面是子组件改变了父组件值的情况

 每一次改变input值，子组件值改变，父组件值相应改变

可以看到，修改props传过来的值，是可以修改的，父组件里面也会跟着修改。

接下来分析下出现这种情况的原因：

js执行的时候，会把基本类型的数据保存在栈空间中，引用类型的数据保存在堆空间中

父组件传递给子组件的，实际上只是一个引用地址，当子组件修改这个对象时，是真的修改了在堆空间中保存的数值，当然父组件中的值也会发生变化，但是引用地址没有进行修改，所以并没有报错。