1 Unstar Star 0 Fork 0

飞道学院 / fd-web-callTypeScriptMIT

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
飞道Web前端开发-组件通信 spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

组件通信

逻辑

  • 列表组件中点击新增时段按钮显示新增时段弹框

组件列表

组件编号 描述
zj-000001 左侧
zj-000002 上部
zj-000003 列表
zj-000004 新增
zj-000005 编辑
  • 在组件列表中点击新增时段按钮显示新增时段弹出框,即在列表组件和新增时段弹框组件进行通信,在点击新增时段时告诉组件新增时段弹框进行显示

  • 事件、响应文件对应

    • html中查找新增时段按钮绑定的事件
    <input type="button" value="新增时段" data-feidao-actions="click:eu-002" class="border-none radius-4 vertical-a-t bg-1b color-f cursor-p fr" style="height:30px; line-height:30px;"/>
    • 根据事件名eu-002s.ts文件中查找对应的响应名
    export default {
    	'fd-events-init': 'a000',
    	'eu-001': 'a001',
    	'eu-002': 'a002',
    	'eu-003': 'a003',
    	'eu-004': 'a004',
    	'eu-005': 'a005',
    	'eu-006': 'a006'
    };
    • 查找的响应名为a003,找相应的响应文件,在此文件中写组件通信逻辑
  • 组件通信是通过调用原子操作import fire from '@feidao/web/atom/browser/msg/fire'实现

    import { IFeidaoAiBrowserComponent } from "@feidao/web/interfaces";
    import fire from '@feidao/web/atom/browser/msg/fire';
    
    export default async function a003(fd: IFeidaoAiBrowserComponent, ...args: any[]) {
    	//第一个参数为 组件编号 第二个参数为事件名称 后续参数为传给被通信组件的参数
    
    	await fire('zj-000004', 'eu-001', 1, 2);
    }
  • 被通信组件接受参数,参数在函数的第二个参数args

  import { IFeidaoAiBrowserComponent } from '@feidao/web/interfaces';

  export default function a001(fd: IFeidaoAiBrowserComponent, ...args: any[]) {
  	console.log(args);
  }

Comments ( 0 )

Sign in for post a comment

TypeScript
1
https://gitee.com/feidao-edu/fd-web-call.git
git@gitee.com:feidao-edu/fd-web-call.git
feidao-edu
fd-web-call
fd-web-call
master

Search

132457 8cb2edc1 1899542 131848 70c8d3a4 1899542