Vue2中以类实例为Props，子组件调用类方法修改是否合规？

为什么没触发Props报错？ #

Vue2的Props校验规则是禁止直接修改Props的引用（比如把this.user换成新的User实例），但你这里只是调用实例方法修改了user内部的name属性——本质上user这个引用本身没变化，只是它的内部状态变了，所以Vue不会抛出Props修改的错误。

另外，因为你把user存在了根组件的data里，Vue会自动把这个实例的name属性转为响应式，所以修改后视图能正常更新，这也是代码能跑通的原因。

这种做法是不是不良实践？ #

确实属于不推荐的实践，核心问题是违反了Vue的单向数据流原则：

• 子组件直接修改父组件的状态，会让数据流变得混乱，调试时你很难追踪到底是哪个组件修改了user.name，尤其是在大型项目里，维护成本会飙升。
• 一旦后续需要对user.name的修改做额外逻辑（比如校验、日志、联动其他状态），你得在所有修改它的子组件里加代码，完全不符合高内聚的设计思路。

推荐的写法 #

遵循单向数据流，子组件只负责触发事件，由父组件来处理状态修改：

class User {
  name = 'initial name'

  setName (name) {
    this.name = name
  }
}

Vue.component('child', {
  props: ['user'],
  // 子组件触发事件，把新值传给父组件
  template: '<div><input @input="$emit(\'update-name\', $event.target.value)"/></div>'
})

var app = new Vue({
  el: '#app',
  data () {
    return {
      msg: 'vue inst',
      user: new User()
    }
  },
  methods: {
    updateUserName(newName) {
      this.user.setName(newName)
      // 这里可以加任何额外逻辑，比如校验、日志
    }
  },
  // 父组件监听事件，处理状态修改
  template: '<div>{{user.name}}<child :user="user" @update-name="updateUserName"/></div>'
})

如果你的业务场景需要更复杂的状态管理，也可以考虑把User的状态和方法封装到Vuex（Vue2生态）里，让状态变更更可控。

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