16、前端组件通信与自定义事件实现

vim8coder

于 2025-10-03 10:58:58 发布

阅读量15

点赞数

CC 4.0 BY-SA版权

分类专栏：深入Aurelia实战精髓文章标签：前端组件通信自定义事件 Event Aggregator

本文链接：https://blog.youkuaiyun.com/vim8coder/article/details/153854755

深入Aurelia实战精髓专栏收录该内容

32 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

前端组件通信与自定义事件实现

在前端开发中，组件之间的通信至关重要。本文将详细介绍如何在应用中添加新组件以实现图书管理功能，以及如何使用自定义事件来增强组件间的交互。

1. 创建编辑图书组件

在已有图书组件的基础上，需要添加编辑图书组件，让用户能够修改图书的详细信息。
- 导入必要模块 ：首先，要导入 Event Aggregator 模块，用于发布和订阅事件；同时导入 Lodash 实用工具模块，方便比较图书对象的不同版本。
- 声明可绑定属性 ：声明两个可绑定属性 editMode 和 book ，通过单向数据绑定从图书组件传递下来。

import {bindable, inject, computedFrom} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';
import _ from 'lodash';                 
@inject(EventAggregator)           
export class EditBook{

    @bindable editMode;          
    @bindable book;                  
    constructor(eventAggregator){
        this.resetTempBook();