具体场景如下:
父组件监听子组件通过 @Output 触发的某个事件, 这个事件会在子组件成员 val 变化时触发, val 有 @Input 修饰器, 父组件可以向 val 传值, 代码中 val 绑定了 parentVal
在事件触发时, 父组件的处理函数修改 parentVal(代码中是一直设置为 false)
问题: 正常来说, 子组件的 val 应该与 parentVal 保持一致, 然而, 并没有, parentVal 的修改被丢弃了.
心累.
双向绑定貌似可以绕过, 但是还是心累.
代码如下:
父组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<app-childc [val]="parentVal" (valChange)="onChildValChange($event)"></app-childc>`,
})
export class AppComponent {
title = 'app';
parentVal = false;
onChildValChange() {
console.log('parent handle change event');
this.parentVal = false;
}
}
子组件代码:
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-childc',
template: `
<p>child content: {{val}}</p>
<button (click)="onClick()">Click me</button>
`,
})
export class ChildcComponent implements OnInit {
@Input() val = false;
@Output() valChange = new EventEmitter();
constructor() { }
ngOnInit() {
}
onClick() {
console.log('child click');
this.val = !this.val;
this.valChange.emit(this.val);
}
}
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.