什么是最好的；“解耦”；将焦点集中到Aurelia组件的方法？

假设我已经构建了某种Aurelia组件。对于本例，假设我构建了一个名为ui money的假设组件

假设ui货币组件包含一个文本输入元素，以及显示汇率的输入旁边的另一个元素（例如span）。本质上，类似于：

<template>
   <input value.bind="amountStr" ... >
   <span>${exchange_rate}</span>
</template>

${汇率}

然后我构建一个包含元素的Aurelia视图（页面）

我的问题是：假设我想把重点放在“ui货币”元素上

实际上，我不想知道ui货币元素的内部构成（白盒知识），也不应该知道。但很明显，我需要关注ui money元素中的INPUT元素

因此，似乎我需要让ui money元素为我执行设置焦点的操作

现在最明显的第一个选项是为ui money元素提供一个ref，例如

，并让ui money视图模型公开某种

takeFocus（）

方法。然后我们可以调用

purchasePriceUx.takeFocus（）

---

但我很想知道是否有更好的方法来实现这一点，同时仍然保持相同的解耦级别。

您可以使用框架标准配置附带的可绑定属性和焦点属性：

重要的是：

app.html

其重点是：
自定义元素：
常规文本框：

some element.html

some element.js

从“aurelia框架”导入{bindable，bindingMode}；
导出类元素{
@可绑定（{defaultBindingMode:bindingMode.twoWay}）文本；
//绑定属性不能命名为focus，因为它会干扰
//焦点自定义属性
@bindable（{defaultBindingMode:bindingMode.twoWay}）hasFocus；
}

您希望在加载元素时或任意时间点聚焦元素吗？这可能是相关的