About event binding in the v-model of custom components.

How does the event binding syntax for

vue work?

Vue.component("base-checkbox", {
  model: {
    prop: "checked",
    event: "change"
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit("change", $event.target.checked)"
    >
  `
})

<base-checkbox v-model="lovingVue"></base-checkbox>

above is a piece of code from the vue official document
there is a problem with the understanding of change change = "$emit ("change", $event.target.checked)" . Here input listens for the change event with v-on, and when the change event is triggered, the execution of $emit triggers the change event again, doesn"t that make it a loop?

Apr.07,2021

this place is about the operation of double binding of a subcomponent. The change event triggered by v-on:change is accepted by the upper layer, and the component itself will not receive this event.
v-on:change what you do is convert the change event of the dom element input into the change event of the Vue component

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eaab92-2000.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eaab92-2000.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?