Angular 1.5组件单向绑定为何能修改父组件值？相关疑问

这是个非常典型的Angular 1.x组件绑定困惑点，我来一步步帮你理清楚：

首先先回顾下你遇到的情况：你用<单向绑定了一个对象textfield，虽然是单向绑定，但修改子组件里对象的属性时，父组件的值也跟着变了。这本质上是JavaScript引用类型的特性，而非Angular绑定的“bug”——单向绑定确实不会把父作用域的值复制到子作用域，但对于对象/数组这类引用类型，父子组件拿到的是同一个内存地址的引用，所以修改内部属性自然会同步到父组件。

接下来解答你的两个疑问：

1. 单向绑定是否应仅用于原始类型？ #

不是“仅能用于”，而是原始类型的单向绑定才会完全体现“单向不回传”的预期。

• 当绑定的是字符串、数字、布尔这类原始类型时，单向绑定会把父值的副本传给子组件，子组件修改这个副本不会影响父组件，这才是我们直觉上认为的“单向”。
• 当绑定的是对象/数组这类引用类型时，即便用了<单向绑定，父子组件共享的是同一个引用。如果子组件只是读取对象属性，那完全没问题；但如果子组件修改了对象的属性，父组件的值也会跟着变——这不是Angular绑定的问题，是JavaScript的引用传递机制导致的。

如果你的需求是子组件绝对不能修改父组件的状态，那用单向绑定引用类型时，建议在子组件内部深拷贝一份对象再操作（比如用angular.copy），避免意外修改父数据。

2. 使用单向绑定绑定对象是否有任何优势？ #

当然有，而且优势很明显：

• 性能优化：相比双向绑定（=），单向绑定不需要Angular监听子组件的变化来同步回父组件，减少了脏检查的watchers数量，对于复杂应用来说，性能提升会很明显。
• 明确数据流向：单向绑定在语义上明确了“数据从父组件流向子组件，子组件不应该主动修改父数据”的设计意图，让代码的数据流更清晰，后续维护时更容易理解谁是数据的所有者。
• 避免意外的双向同步：如果用双向绑定，子组件不小心修改了对象属性，父组件会自动同步，这种“隐式”的修改很容易引发难以排查的bug；而单向绑定至少在语义上提醒开发者，这种修改是不符合设计意图的，需要谨慎处理。

给你的场景提个小优化建议 #

如果你想让子组件的修改不影响父组件，同时又能把修改后的结果传回父组件，可以结合深拷贝和输出绑定（&）来实现：

angular.module('myapp')
.component('textComponent', {
  template: `
    <input type="text" ng-model="$ctrl.localTextfield.value">
    <button ng-click="$ctrl.saveChanges()">保存</button>
  `,
  bindings: {
    textfield: '<',
    onUpdate: '&' // 输出绑定，用于把修改传回父组件
  },
  controller: function() {
    const ctrl = this;

    // 当父组件传入的textfield变化时，深拷贝到本地变量
    ctrl.$onChanges = function(changes) {
      if (changes.textfield) {
        ctrl.localTextfield = angular.copy(changes.textfield.currentValue);
      }
    };

    // 主动触发父组件的回调，把修改后的值传回去
    ctrl.saveChanges = function() {
      ctrl.onUpdate({ updatedTextfield: ctrl.localTextfield });
    };
  }
});

在父组件的HTML中这样使用：

<text-component 
  textfield="form.textfield" 
  on-update="form.textfield = updatedTextfield">
</text-component>

这样既保证了子组件修改不会影响父组件的原始数据，又能通过明确的回调把修改结果传回父组件，符合单向数据流的最佳实践。

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