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

文章の目录

• 1、vue中，父子组件通信最常用的方式就是props和 $emit，但是父组件传递给子组件的数据，能不能进行修改，修改后都有啥问题呢
• 2、示例
• 3、页面展示
• 4、测试结果说明
• 5、总结
• 6、官方解释
• 写在最后

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^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！