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。在value中更新childOne确实会更新value中的parent，但不会将其传递给childTwo。

Answer 1

注意： 您正在此对象中设置值。不是直接在 $ 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中的值将更新父级以及childTwo中的值。

将数据从子组件传递到父组件，然后向下传递

1 个答案: