Angular (2+): Mutating an input param in child component

Question

改变子组件中的输入参数是否正常，或者是否应该将所有输入对象视为只读，然后将任何更改发出事件返回给父组件并将更改委托(delegate)给父组件？修改输入参数是否会出现任何问题。

class ChildComponent {

  @Input() parentParam;
  @Output() clickValEvent = new EventEmitter<boolean>();

  let parentParamClone = Object.assign({}, parentParam);

  childClickEvent(val) {
    //Update value locally.
    // parentParam.clickVal = val;

    //Inform parent & let it do necessary change.
    // this.clickValEvent.emit(val);

    //Only play with local clone.
    // parentParamClone.clickVal = val;
    }
}

Answer 1

没错，是的，你可以修改子组件中的@input值，它会反射(reflect)在你的父组件中。但是有两个原因你应该避免这种情况:

1. 它不适用于原始值，如果您希望更改 @input 原始值并且它反射(reflect)在您的父组件中，这将不起作用。

2. 这不是一个好的做法，它为所有子组件打开了任意更新 @input 对象的机会，使我们难以追踪值的变化。因此，使用 @output 可以为我们以后维护代码节省很多精力，因为它更具声明性。

我觉得很奇怪，我无法从 Angular 文档中找到关于此的任何官方解释。与 ReactJs 和 VueJs 不同，它们非常不鼓励我们改变子组件中的 props。