一、单向数据流

  prop使父子之间形成了一个单向数据流，父级的prop更新会向下流动到子组件中，但是反过来不行，这样设计可以防止子组件意外变更父级组件的状态，所以如果在子组件中改变prop，Vue会在浏览器的控制台中发出警告。警告如下：

vue.runtime.esm.js?2b0e:619 [Vue warn]: 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: "deptInfo" found in...

二、子组件中如何使用prop的值

1.定义一个本地的data property并将这个prop用作其初始值

props： ['deptInfo'],
data: function() {
  return {
    departmentInfo ：this.deptInfo
}

2.如果需要对传入的原始值进行转换，可以定义一个计算属性

props： ['data'],
computed: {
  tableData : function() {
    return JSON.parse(JSON.stringify(data));
  }
}

注意

  在JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。这个时候需要对数据进行深拷贝，如：

props： ['data'],
computed: {
  tableData : function() {
    return JSON.parse(JSON.stringify(data));
  }
}