将数据从子组件传递给父组件并返回

Question

假设我有一个如下所示的组件：

parent.component.js

...
template: `<div>
             <child-one value="value" callback="callback"></child-one>
             <child-two value="value"></child-two>
           </div>`,
controller: function() {
  this.callback = function(n) {
    this.value = n;
  }
}
...

那么子组件是这样的：

childOne.component.js

...
bindings: {
  value: '<',
  callback: '<'
},
template: `<input type="text"
                  ng-model="$ctrl.value"
                  ng-change="$ctrl.callback($ctrl.value)"
           />`
...

childTwo.component.js

...
bindings: {
  value: '<'
},
template: `<div>{{$ctrl.value}}</div>`
...

（绑定技术感谢krawaller）

我希望childOne 中设置的值转到childTwo。更新childOne 中的value 确实会更新parent 中的value，但不会将其传递给childTwo。

Answer 1

注意： 您正在 this 对象中设置值。不直接在 $scope 中。

使用 $scope，而不是 this

修改代码：

parent.component.js

...
template: `<div>
             <child-one value="value" callback="callback"></child-one>
             <child-two value="value"></child-two>
           </div>`,
controller: function($scope) {
  $scope.callback = function(n) {
    $scope.value = n;
    console.log($scope.value);
  }
}
...

如果你想用 this 关键字编写代码，请使用 controllerAs 语法。

parent.component.js

请参考以下代码

...
template: `<div>parent: {{vm.value}} <br/><div/>
         <div>
            <child-one value="vm.value" callback="vm.callback"></child-one>
            <child-two value="vm.value"></child-two>
         </div>`,
controller: function() {
  const vm = this;
  vm.callback = function(n) {
    vm.value = n;
    console.log(vm.value);

  }
},
controllerAs: "vm"
...

结果： 更新 childOne 中的值将更新 parent 以及 childTwo 中的值。