vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent

最新推荐文章于 2024-12-27 09:35:01 发布

鸭绒

最新推荐文章于 2024-12-27 09:35:01 发布

阅读量4.6w

点赞数 17

分类专栏： bug的解决方案 vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_43334673/article/details/108681421

版权

在Vue.js中使用props进行父子组件通信时，出现错误提示：Avoid mutating a prop directly...。这是因为直接修改prop是不被允许的。解决方案包括使用$emit将数据变化通知父组件进行修改，或者将数据封装在对象中，子组件修改对象属性。通过这两种方式，可以避免直接修改prop导致的错误。

摘要由CSDN通过智能技术生成

使用props进行父子组件通信时产生错误：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “currentIndex”

产生错误的原因：在子组件中，你试图修改父组件通过props与子组件通信的数据。

两种解决方法：

将这个父组件传进来的要修改的数据，通过$emit再传回给父组件，在父组件中进行修改。
当父组件通过props与子组件通信时，可以将数据放在一个对象中传递给子组件，这时再子组件就可以修改对象中的属性，也就修改了父组件传过来的数据。

例如(方法一)：

父组件：

      <tab-control
        :titles="titles"
        @choseItem="choseItem"
        :currentIndex="currentIndex"
        ref="tabControl"
      ></tab-control>