A, $emit

The child component can reference the parent component’s data via props, so when the child component wants to modify this data, it can use $emit to modify the parent component’s data on the child component.

$emit receives two arguments:

  • {string} eventName Triggers events on the current instance.
  • [...args]Additional parameters are passed to the listener callback.

The sample

Scenario: The parent gives the child money, and the child spends it. The child can see the exact amount of money, but the child can’t spend the money directly by triggering an event. The parent listens for the event, and the parent receives the parameters passed by the child via $event

  • Child components can be called$emitPassing the event name to fire an event:
{{money}} <button @click="$emit('update:money', </button> </div> </template> <script> export default {props: ["money"] } </script> <style> .child{ border:1px solid green; } </style> Copy the codeCopy the code
  • Used on a child component of the parent componentv-onListen for this custom event, pass$eventAccepts arguments passed by the child component
//parent. Vue <template> <div class="parent"> <div> Dad now has {{total}} yuan <hr/> <Child :money="total" V-on :update:money="total = $event"/> // :money="total"  </div> </div> </template> <script> import Child from "./child.vue" export default { components: { Child }, data() { return { total: 10000 } } } </script> <style> .parent{ border:1px solid red; } </style> Copy the codeCopy the code

Second, the sync

.sync simplifies the above code and is used directly on the parent component

//parent. Vue <template> <div class="parent"> <div> Dad now has {{total}} yuan <hr/> <Child :money. Sync ="total"/> </div> </div> </template> copies the codeCopy the code

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

Third, summary

  • Components cannot be modifiedpropsExternal data of
  • $emitCan trigger events and pass parameters
  • $eventYou can get$emitThe parameters of the