Aurelia新手求助：自定义元素子向父视图模型传值

作为刚摸过Aurelia不久的过来人，我太懂你想做可复用组件却卡在校验/值传递上的心情了！针对你要做的FilePicker自定义元素，我给你整理了一套清晰的实现步骤，保证能在Request页面顺利拿到选中的文件：

1. 先实现可复用的FilePicker自定义元素 #

首先我们要把文件选择的逻辑封装成独立的自定义元素，分为视图和视图模型两部分：

视图文件（file-picker.html） #

这里就是基础的文件输入框，绑定change事件来处理用户选择文件的操作：

<template>
  <input 
    type="file" 
    multiple 
    change.trigger="handleFileChange($event)"
    accept=".pdf,.doc,.docx,.jpg,.png" <!-- 可按需限制允许上传的文件类型 -->
  >
</template>

视图模型（file-picker.js） #

这里我们提供双向绑定和自定义事件两种方式传递选中的文件，你可以根据场景灵活选择：

import { bindable, inject } from 'aurelia-framework';
// 如果你需要在组件里用路由，像你提到的router.bind，这里可以注入或者用bindable传递
import { Router } from 'aurelia-router';

@inject(Router) // 全局注入Router，也可以用下面的@bindable router替代
export class FilePicker {
  // 方式一：双向绑定属性，让父组件直接绑定获取值
  @bindable({ defaultBindingMode: 'twoWay' }) selectedFiles = [];
  
  // 方式二：用bindable接收父组件传递的router（按需使用）
  // @bindable router;

  constructor(router) {
    this.router = router; // 若用inject方式拿到router
  }

  handleFileChange(event) {
    // 把FileList转换成数组，方便后续操作
    const selectedFiles = Array.from(event.target.files);
    // 更新双向绑定的属性，父组件会自动同步最新值
    this.selectedFiles = selectedFiles;
    // 触发自定义事件，父组件可监听该事件获取文件（可选）
    this.dispatchFileSelectedEvent(selectedFiles);
  }

  dispatchFileSelectedEvent(files) {
    const event = new CustomEvent('file-selected', {
      detail: { files },
      bubbles: true // 让事件能冒泡到父组件
    });
    this.element.dispatchEvent(event);
  }
}

2. 在Request页面中使用并获取文件 #

接下来要在你的Request页面里引入这个自定义元素，然后获取选中的文件：

第一步：注册自定义元素 #

如果想让整个项目都能用这个组件，就在main.js里全局注册：

import { PLATFORM } from 'aurelia-framework';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  // 注册FilePicker为全局资源
  aurelia.globalResources(PLATFORM.moduleName('components/file-picker/file-picker'));

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

如果只是在Request页面局部使用，就在Request页面的视图开头加：

<require from="./components/file-picker/file-picker"></require>

方式一：用双向绑定直接获取值（最推荐） #

在Request页面的视图里绑定自定义元素的selected-files属性，父视图的变量会自动同步选中的文件：

<template>
  <!-- 你的表单其他内容 -->
  <div class="form-group">
    <label>上传附件</label>
    <file-picker selected-files.two-way="formAttachments"></file-picker>
  </div>
  <button click.trigger="submitForm()">提交表单</button>
</template>

然后在Request页面的视图模型里，直接使用formAttachments变量：

export class RequestPage {
  // 初始化附件数组
  formAttachments = [];

  submitForm() {
    // 这里就能拿到用户选中的所有文件了！
    console.log('要上传的附件：', this.formAttachments);
    // 接下来写你的上传逻辑，比如用fetch或者axios发送文件
  }
}

方式二：监听自定义事件获取值 #

如果不需要双向绑定，只想在用户选完文件后做一次操作，可以监听组件触发的file-selected事件：

<template>
  <file-picker file-selected.delegate="handleFileSelection($event)"></file-picker>
</template>

视图模型里处理事件：

export class RequestPage {
  attachments = [];

  handleFileSelection(event) {
    this.attachments = event.detail.files;
    console.log('用户选中了文件：', this.attachments);
    // 这里可以做一些即时操作，比如预览文件
  }
}

补充：关于你提到的router绑定 #

如果你的FilePicker需要用到路由功能，比如跳转到某个页面，除了上面的注入方式，也可以直接在视图里绑定父组件的router：

<file-picker router.bind="router" selected-files.two-way="formAttachments"></file-picker>

然后在FilePicker的视图模型里用@bindable router接收即可，这样组件里就能调用this.router.navigate(...)这类方法了。

内容的提问来源于stack exchange，提问作者Ray