Question

我有一个parent组件，其中视图模型包含属性prop1。在其看来，自定义元素具有view-model.ref="prop1"。

export class Parent {
  public prop1;
}

<template>
  <custom-element view-model.ref="prop1"></custom-element>
</template>

这就像一个咒语，我在parent中获得了自定义元素的视图模型的引用。

现在，我将具有parent组件的子路由器添加到child。在child的视图模型中，添加一个属性prop1。在其看来，自定义元素具有view-model.ref="prop1"。就像我在parent中所做的一样……

我导航到parent/child时，parent的容器prop1停止引用parent的自定义元素，并开始引用{{1} }。如果我用不同的名称命名属性，那没有问题。

知道为什么会这样吗？以及如何避免这种行为而不必担心属性的命名？

编辑我偶然发现了更多信息！如果属性是在视图模型中初始化的，那么我似乎能够在视图模型中保留引用。请注意，我使用的是Typescript，所以我认为未分配的类属性的已编译代码在分配属性之前根本不会提及该属性。我仍然不太明白问题到底出在哪里...

如果我直接在模板中使用child而不将其映射到视图模型中的显式属性，我仍然会遇到相同的问题：

view-model.ref

Answer 1

当您在类中创建属性并且不对其分配任何内容时，babel / typescript会删除该属性，就好像没有声明该属性一样。.因为它实际上没有做任何事情。打字稿只对您在编译时的定义感兴趣。

既然已经释放了您在子级中的属性，那么您就可以在子级中将其绑定到未声明的属性。在这种情况下，aurelia为您创建一个属性并绑定到该属性。

但是，在您的情况下，aurelia在父作用域中找到此属性（就像常规JS范围规则一样），因此不要在子作用域中创建“新属性”，而是绑定到父属性。

这就是为什么当您在子级中初始化属性（即使使用undefined时）也可以正常工作的原因。因为您在2个范围内有2个属性。

，当您更改名称时，aurelia将为您创建一个新属性。这是另一个规则-wen aurelia为您创建一个属性-它在可用的最小范围内创建它。一切都会恢复正常。

您可以在repeate.for中注意到很多这种行为，因为转发器为每个repeate循环创建了一个不可见的作用域。如果将重复项中的任何内容绑定到不存在的属性，则将在每个子级中拥有该属性，而在父级中没有一次。