2

我试图在 Angular 和 Vue 中构建一个选项卡组件。当我更改组件的道具时，Vue 尖叫（在控制台中引发错误）。Angular 似乎很好。

<tab [active]="true"></tab>

export class TabComponent implements OnInit {
  @Input() name: string;
  @Input() active = false;

  ngOnInit() {
    // Here I am mutatating an input property which is bad because, 
    // further changes to that input doesn't take effect

    this.active = false;
    console.log({name: this.name, active: this.active});
  }
}

我个人认为修改组件的输入属性是不对的。我的问题是为什么 Angular 团队没有通过在控制台中抛出错误来强制执行这一点。

Vue 将显示此消息

vue.js:634 [Vue 警告]：避免直接改变 prop，因为只要父组件重新渲染，该值就会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“选择”

4

1 回答 1

1

Vue 警告中的建议也适用于角度组件。输入应该被视为不可变的，因为您无法阻止它们被父组件覆盖。如果您想使用道具来初始化状态，您应该有一个单独的内部状态字段，您可以在其中一个生命周期挂钩（例如 OnChanges 或 OnInit）中进行初始化。

我已经养成将所有输入标记为只读的习惯，因此我不想改变它们。

于 2020-04-19T01:01:59.870 回答