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

.
Menu