The.sync modifier enables bidirectional binding of a child component to its parent, and allows the child component to synchronize the value of the parent component.

In general, to pass values between parent and child components, you usually use props and custom event emit. The parent component passes the value to the child component via props, which then passes the emit. The parent component passes the value to the child component via props, which then passes the emit. The parent component passes the value to its children via props, and the children emit the value to the parent component via emit. The parent component listens for $event to get the value from the child component. If you want to simplify the code here, you can use the.sync modifier, which is essentially a syntactic sugar.

Scene description

  • What if a father gives his son money and the son wants to spend it
  • A: Son calls (trigger event) and asks dad for money
  • Vue rule: Components cannot modify external data of props
  • Vue rule :$emit can emit events and pass parameters
  • Vue rule: Event can get Event can get event can get emit parameters

The sample

Child.vue

  • :money. Sync =”total” equivalent to :money=”total” V-on :update:money=”total=$event”