what does an input event on a component do in Vue.js?-CodePudding

The following piece of code is taken from the Vue documentation:

<ChildComponent v-model="pageTitle" />

<!-- would be shorthand for: -->

<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

There is an input event on a component. I understand what an input event does on an input. But what does the input event do on a component?

CodePudding user response：

It's all about Custom events, just read Docs

Example:

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  
})

then you can use custom-input like this:

 <custom-input :value="pageTitle" @input="pageTitle = $event" />

where $event is a native event of the input

CodePudding user response：

The @ is short for v-on directive which is used to listen to DOM events emitted/triggered from a specific element. Now most of the native elements will interact with the outside world by emitting their own corresponding events by default. For instance, div element triggers click event, input element triggers input, change, focus and other helpful events.

Unlike native elements, there is absolutely no events triggered BY DEFAULT in a custom component. Therefore, you can only listen to events that are emitted from within the component. Those are custom events, so you can rest assure that none of these event setups below will work unless inside each component emits their own click, input, focus event respectively:

<ComponentA @click="onClickComponentA" />
<ComponentB @input="onInputComponentB" />
<ComponentC @focus="onFocusComponentC" />

In your case, ChildComponent is clearly not a native element so inside this component, it must somewhere emit input event.