Functional Components
functional attribute in single file component (SFC) <template> has been removed
{ functional: true } option has been removed when creating component through function
// Using the <dynamic-heading> component, responsible for providing the appropriate title (i.e.: h1, h2, h3, etc.), in which this may be written as a single file component:// Vue 2 Functional Component Exampleexport default {
functional: true,
props: ['level'],
render(h, { props, data, children }) {
return h(`h${}`, data, children)
}
}
// Vue 2 functional component example uses <template><template functional>
<component
:is="`h${}`"
v-bind="attrs"
v-on="listeners"
/>
</template>
<script>
export default {
props: ['level']
}
</script>
Now in Vue 3, all functional components are created with normal functions, in other words, there is no need to define the { functional: true } component option.
They will receive two parameters: props and context. The context parameter is an object containing the attrs, slots, and emit property of the component.
Furthermore, now instead of providing h implicitly in the render function, h is imported globally.
Using the aforementioned example of the <dynamic-heading> component, here is what it looks like now.
// vue3.0
import { h } from 'vue'
const DynamicHeading = (props, context) => {
return h(`h${}`, , )
}
= ['level']
export default DynamicHeading
// vue3.0 single file writing method<template>
<component
v-bind:is="`h${$}`"
v-bind="$attrs"
/>
</template>
<script>
export default {
props: ['level']
}
</script>
The main difference is
functional attribute exist <template> Removed in listeners 现exist作为 $attrs Part of the delivery，It can be deleted
Writing asynchronous components and defineAsyncComponent method
Now use the defineAsyncComponent helper method, for displaying the definition asynchronous component
Rename the component option to loader
The Loader function itself no longer accepts resolve and rejuct parameters, and must return a promise
//
// Previously, asynchronous components were created by defining the component as a function that returns a Promiseconst asyncPage = () => import('./')
// Or create as an optionconst asyncPage = {
component: () => import('./'),
delay: 200,
timeout: 3000,
error: ErrorComponent,
loading: LoadingComponent
}
//
In，Need to usedefineAsyncComponentTo define
import{ defineAsyncComponent } from 'vue'
import ErrorComponent from './components/'
import LoadingComponent from './components/'
// Definition method without optionsconst asyncPage = defineAsyncComponent(() => import('./'))
// Asynchronous component with optionsconstasyncPageWithOptions = defineAsyncCopmonent({
loader: () => import('./'),
delay: 200,
timeout: 3000,
errorComponent: ErrorComponent,
LoadingComponent: LoadingComponent
})
The loader function no longer receives resolve and reject parameters and must always return Promise.
//
const oldAsyncComponent = (resolve, reject) => {}
//
const asyncComponent = defineAsyncComponent(() => new Promise((resolve, reject) => {}))
Component events need to be declared in emits option
A emits option is now available in vue3, similar to props option
This option can be used to define events emitted by a component to its parent object
<!-- -->
<template>
<div>
<p>{{ text }}</p>
<button v-on:click="$emit('accepted')">OK</button>
</div>
</template>
<script>
export default {
props: ['text']
}
</script>
<!-- -->
<!-- Now andpropsimilar，Can be usedemitsTo define the events emitted by the component -->
<!-- This option also receives the object，Used topropsVerify the passed parameters as well -->
<!-- It is strongly recommended to record all issued by each componentemits，Because it's removed.nativeModifier，All listeners for undeclared events will be included in the$attrmiddle，By default，This listener will be bound to the component's root node -->
<template>
<div>
<p>{{ text }}</p>
<button v-on:click="$emit('accepted')">OK</button>
</div>
</template>
<script>
export default {
props: ['text'],
emits: ['accepted']
}
</script>
The above is a detailed explanation of the incompatible changes of components in vue3. For more information about incompatible changes of components in vue3, please pay attention to my other related articles!