Angular 组件交互(二)@Output

Photo by Stefan Widua on Unsplash

再看 @Input

上一篇提到,@Input 代表了参数传递的入方向。而 @Output 就代表了数据传递的出方向。

@Output 用法

经过 @Output 的修饰,我们可以将一个变量打造成一个组件出口。组件的变化可以通过这个出口发出这个事件消息。父组件通过捕获这个事件,获取传递的参数,进行进一步的处理。如下所示。

修饰事件变量

在子组件中,我们需要用 @Output 来修饰我们的 change 变量。它是一个 EventEmitter 类型的对象。

编写触发器

为了触发这个事件,我们编写一个触发器(函数)来触发它。函数名称为 OnClick,此函数在按钮被按下时调用。

发出变量

然后我们可以利用 OnClick 来调用事件变量 change,由 change 发出变量 count 给响应此事件的父组件。

大功告成

父组件通过 () 事件绑定语法就可以订阅这个事件,然后针对性的做更多的操作啦。这里在父组件中利用 onChange 函数就可以对订阅的事件做进一步处理,并利用 $event 来接收 change 发出的值。

在线例子

我编写了在线例子,结合本文,可以迅速掌握 @Output 的基本用法。

参考链接

Parent listens for child event

相关阅读

Angular 组件化之 @Input

发表评论

电子邮件地址不会被公开。 必填项已用*标注