Passing objects to next sibling components

问题

My structure in AureliaJS of components is:

<parent>
  <child1> 
  <child2> 
</parent>

I have an object in child1 which I get with ajax requests:

export class Child1 {   
  fechedObject = {}: 
}

I need this property with two-way binding and observable in the second component

export class Child2 {   
  // I need this fechedObject here 
}

What is the best approach to get it?

回答1:

I believe the best approach here is using two-way binding on both child models, to bind the model via two-way binding in the parent.

In your parent.html, you would need this:

<child1 fetched-object.two-way="fetchedObject"></child1>

<child2 fetched-object.two-way="fetchedObject"></child2>

And in both child view-models, you'd declare the variable as a bindable:

bindable()
public fechedObject;

This way any edits that happen in either children, will get passed on to the other child. If you want to prevent edits in child2 from affecting the object in child1, you can simply bind one-way using fechedObject.one-way or fechedObject.bind on your child2.

回答2:

You can get a hold of <child1/> view model reference and bind it to <child2/>:

<child1 view-model.ref='child1'></child1>

<child2 data.bind='child1.fetchedObject'></child2>

So child.data just needs to be bindable:

export class Child2 {

  @bindable
  data
}

来源：https://stackoverflow.com/questions/52173579/passing-objects-to-next-sibling-components