small changes

Multiple event handlers

<!-- both one() and two() will execute on button click -->
<button @click="one($event), two($event)">
  Submit
</button>

组件v-model

<custom-input
  :model-value="searchText"
  @update:model-value="searchText = $event"
></custom-input>

app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
})

emit

app.component('custom-form', {
  emits: ['inFocus', 'submit']
})

validate

app.component('custom-form', {
  emits: {
    // No validation
    click: null,

    // Validate submit event
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm() {
      this.$emit('submit', { email, password })
    }
  }
})

v-model

multi binding

<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>

custom modifier

async component

const { createApp, defineAsyncComponent } = Vue

const app = createApp({})

const AsyncComp = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      resolve({
        template: '<div>I am async!</div>'
      })
    })
)

app.component('async-example', AsyncComp)