Vue.js组件运行正常但触发警告：直接修改chatusers prop问题咨询

嘿，这个问题我太熟悉了！Vue抛出这个警告，核心是在提醒你遵守它的单向数据流规则——父组件传过来的props是只读的，子组件直接修改它的话，不仅父组件重新渲染时你的修改会被覆盖，还会让数据流向变得混乱，后期排查bug超麻烦。下面分两种常见场景给你具体的解决办法：

场景1：需要在子组件修改数据并同步回父组件 #

这种情况最常见，比如你要在子组件里添加/删除聊天用户，还要让父组件同步这个变化：

1. 在子组件声明本地数据，拷贝prop的初始值
   不要直接碰chatusers，而是在data里创建一个本地变量，把prop的值拷贝一份作为初始值（注意引用类型要做拷贝，避免直接修改原引用）：

   export default {
     props: ['chatusers'],
     data() {
       return {
         // 用扩展运算符拷贝数组，避免和原prop共用引用
         localChatUsers: [...this.chatusers]
       }
     }
   }
   

   如果chatusers是嵌套对象的数组，浅拷贝不够的话，可以用JSON.parse(JSON.stringify(this.chatusers))做深拷贝，或者用lodash的cloneDeep工具。

2. 子组件操作本地数据
   之后所有的增删改操作，都针对localChatUsers来做，比如删除一个用户：

   methods: {
     removeUser(userId) {
       this.localChatUsers = this.localChatUsers.filter(user => user.id !== userId);
       // 触发事件通知父组件更新
       this.$emit('update:chatusers', this.localChatUsers);
     }
   }
   

3. 父组件监听事件更新原数据
   在父组件里监听子组件触发的自定义事件，更新自己的数据源：

   <ChatComponent 
     :chatusers="parentChatList" 
     @update:chatusers="parentChatList = $event" 
   />
   

   嫌麻烦的话，还可以用Vue的.sync语法糖简化写法：

   <ChatComponent :chatusers.sync="parentChatList" />
   

场景2：只需要基于prop做数据转换，不需要修改原数据 #

如果你的需求只是对chatusers做过滤、格式化这类操作，不需要修改原数据，那用计算属性是最优解：

export default {
  props: ['chatusers'],
  computed: {
    filteredChatUsers() {
      // 比如只显示在线用户
      return this.chatusers.filter(user => user.isOnline);
    }
  }
}

然后在子组件模板里直接用filteredChatUsers就行，计算属性会自动响应chatusers的变化，而且完全不会修改原prop。

关键提醒 #

永远记住：props是父组件传递给子组件的“原材料”，子组件可以用，但不能直接改。所有需要修改的操作，要么在子组件本地做备份再改，再通知父组件同步；要么用计算属性做纯转换。这样不仅能消除警告，还能让你的组件数据流向更清晰，维护起来轻松很多~

内容的提问来源于stack exchange，提问作者Pankaj