QuickStart 08 - Components In Vue3 (2021.03.11)

Menu

Functional components can only be created using a plain function

import { h } from 'vue'
const DynamicHeading = (props, context) => {
    return h(`h${props.level}`, context.attrs, context.slots)
}
DynamicHeading.props = ['level']
export default DynamicHeading

functional attribute on single-file component (SFC) <template> and functional component option are deprecated

In vue2, we may create a functional component like this:

export default {
  functional: true,
  props: ['level'],
  render(h, { props, data, children }) {
      return h(`h${props.level}`, data, children)
  }
}

Now the syntax is converted to demo1.

functional attribute on single-file component (SFC) is also deprecated and you can write like this:

<template>
  <component
    v-bind:is="`h${$props.level}`"
    v-bind="$attrs"
  />
</template>
<script>
export default {
  props: ['level']
}
</script>

Async components now require defineAsyncComponent method to be created

In vue2, we difenite an async component like below:

const asyncPage = () => import('./NextPage.vue')
// OR
const asyncPage = {
  component: () => import('./NextPage.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}

Now in vue3, we write like this:

import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'
// Async component without options
const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
// Async component with options
const asyncPageWithOptions = defineAsyncComponent({
  loader: () => import('./NextPage.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})

In addition, unlike 2.x, the loader function no longer receives the resolve and reject arguments and must always return a Promise.

// 2.x version
const oldAsyncComponent = (resolve, reject) => {
  /* ... */
}
// 3.x version
const asyncComponent = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      /* ... */
    })
)

Component events should now be declared with the emits option

Details can be see here: QuickStart 03 - Fragments And Emits Component Option