Question

以下模型可以正常工作，我有一个prent组件（app.html + .ts）一个子组件（test-binding.html + .ts）和一个带有双向绑定的输入字段

父组件

test-bindable.html

<template bindable="query">
    <require from="./test-bindable"></require>

    <input type="text" value.bind="query"/>
    <test-bindable query.bind="query"></test-bindable>

</template>

test-bindable.ts

<template>
    <div>${query}</div>
</template>

但是，我不确定如何使用2个子自定义组件来实现相同的功能。我可以使用eventAggregator轻松实现相同目标，并在子组件中侦听要触发的事件，但是，我试图通过两种方式实现相同的功能。例如：

父组件（app.html）

import { bindable } from 'aurelia-framework';

export class TestBindable{
@bindable query = 'potato';

valueChange(newValue, oldValue)
{
    //Do something
}
created(){
    console.log('test component created');
}
}

test-input.html

<template bindable="query">
    <require from="./test-bindable"></require>
    <require from="./test-input"></require>

    <test-input value.bind="query"></test-bindable>
    <test-bindable query.bind="query"></test-bindable>
</template>

test-input.ts

<template>
    input type="text" value.bind="test"/>
</template>

Answer 1

这里要注意的是，k8s.io/client-go（使用bindable）的默认绑定模式实际上是bind。如果您希望两个组件都“互相交谈”，只需在绑定中指定one-way。将two-way与test-input绑定就足够了，因为他是唯一实际更改输入的人。

two-way

双向绑定2个子组件

1 个答案: