If a child component wants to modify the data of the parent component, it often uses custom events to modify it. That is $emit. In this way, the parent component must write a method to modify the properties. like:
Of course there is no problem with this approach. But when written as a shared component, this method seems clumsy and difficult to call and maintain.
The way to solve this drawback is to use the .sync modifier:
sync is essentially just syntactic sugar. When you add .sync, it is equivalent to the code:
where fn1:
fn1(choice){
this.money = val
}
.sync is equivalent to binding a property to the component (subcomponent still receives it through props), and has agreed on a custom event, @update: attribute name. In this way, the subcomponent only needs to pass $emit(update: Attribute name, val), you can modify the properties of the parent component, which is very convenient for both calling and maintenance.