双向绑定 2 个子组件

Question

以下模型工作正常，我有一个预组件 (app.html + .ts) 一个子组件 (test-binding.html + .ts) 和一个具有双向绑定的输入字段

父组件

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

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

</template>

测试-bindable.html

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

测试-bindable.ts

import { bindable } from 'aurelia-framework';

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

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

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

父组件 (app.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>

测试-input.html

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

测试-input.ts

import { bindable } from 'aurelia-framework';

    export class TestInput{
    @bindable query;

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

Answer 1

这里要注意的是，bindable（使用bind）的默认绑定模式实际上是one-way。如果您希望两个组件都 "talk to each other" 只需在绑定中指定 two-way 即可。将 test-input 与 two-way 绑定就足够了，因为他是唯一实际更改输入的人。

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

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

双向绑定 2 个子组件

two-way binding 2 child components

typescript

aurelia

two-way-binding