Vue系列之子组件props接受父组件传递的值，能不能修改？

---

1、vue中，父子组件通信最常用的方式就是props和 $emit，但是父组件传递给子组件的数据，能不能进行修改，修改后都有啥问题呢

2、示例

parent父组件

<template>
  <div class="about">
    <h1>This is an Parent page---{{title}}</h1>
    <children :title="title"></children>
  </div>
</template>

<script>
import Children from './Children.vue'
export default {
  name: 'parent',
  components: {
    Children
  },
  data () {
    return {
      title: 'children'
    }
  }
}
</script>

子组件children

<template>
  <div class="about">
    <h1>This is an Children page---{{title}}</h1>
    <button @click="modifyValue">修改props里的值</button>
  </div>
</template>

<script>
export default {
  name: 'children',
  props: {
    title: {
      type: String
    }
  },
  mounted () {
  },
  data () {
    return {
    }
  },
  methods: {
    modifyValue () {
      this.title = '孩子'
    }
  }
}
</script>

3、页面展示

4、测试结果说明

点击修改props里的值，显示效果如下：

且控制台会报错，如下图

意思就是官方不提倡直接在子组件中修改通过props传递出来的数据。

如果props的数据为对象和数组，是可以直接修改，也不会有报错提示，但是不提倡。

5、总结

父子组件传值时，父组件传递的参数，数组和对象，子组件接受之后可以直接进行修改，并且会传递给父组件相应的值也会修改。

如果传递的值是字符串，直接修改会报错。

不推荐子组件直接修改父组件中的参数，避免这个参数多个子组件引用，无法找到造成数据不正常的原因

6、官方解释

单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！