Explain the incompatible changes of components in vue3 in detail

  • 2021-10-27 06:34:44
  • OfStack

Directory functional component
Writing method of asynchronous component and defineAsyncComponent method
Component events need to be declared in emits options

Functional component

functional attribute in Single File Component (SFC) < template > Has been removed
The {functional: true} option has been removed while creating a component through a function


//  Use  <dynamic-heading>  Component, responsible for providing the appropriate title  ( Namely: h1 , h2 , h3 , wait ) , in  2.x  This may be written as a single file component: 
// Vue 2  Example of functional components 
export default {
 functional: true,
 props: ['level'],
 render(h, { props, data, children }) {
 return h(`h${props.level}`, data, children)
 }
}

// Vue 2  The functional component sample uses the  <template>
<template functional>
 <component
 :is="`h${props.level}`"
 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 {functional: true} component options.
They will receive two parameters: props and context. The context parameter is an object that contains the component's attrs, slots, and emit property.
In addition, instead of supplying h implicitly in the render function, h is now imported globally.
Use the aforementioned < dynamic-heading > Component, here is what it looks like now.


// vue3.0
import { h } from 'vue'
const DynamicHeading = (props, context) => {
 return h(`h${props.level}`, context.attrs, context.slots)
}
DynamicHeading.props = ['level']
export default DynamicHeading
// vue3.0 Single file writing 
<template>
 <component
 v-bind:is="`h${$props.level}`"
 v-bind="$attrs"
 />
</template>

<script>
export default {
 props: ['level']
}
</script>

The main difference is that


functional attribute  In  <template>  Remove from 
listeners  Now as  $attrs  Adj. 1 Partial delivery, which can be deleted 

Writing method of asynchronous component and defineAsyncComponent method

Now use the defineAsyncComponent helper method to display the definition asynchronous component
The component option is renamed to loader
The Loader function itself no longer accepts resolve and rejuct parameters and must return 1 Promise


// vue2.x
//  Previously asynchronous components were created by defining components to return Promise To create the function of 
const asyncPage = () => import('./NextPage.vue')
//  Or create it as an option 
const asyncPage = {
 component: () => import('./NextPage.vue'),
 delay: 200,
 timeout: 3000,
 error: ErrorComponent,
 loading: LoadingComponent
}

// vue3.x
 In vue3.x You need to use the defineAsyncComponent To define 
import{ defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

//  Definition method without options 
const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))

//  Asynchronous components with options 
constasyncPageWithOptions = defineAsyncCopmonent({
 loader: () => import('./NextPage.vue'),
 delay: 200,
 timeout: 3000,
 errorComponent: ErrorComponent,
 LoadingComponent: LoadingComponent
})

The loader function no longer accepts resolve and reject parameters and must always return Promise


// vue2.x
const oldAsyncComponent = (resolve, reject) => {}
// vue3.x
const asyncComponent = defineAsyncComponent(() => new Promise((resolve, reject) => {}))

Component events need to be declared in emits options

One emits option is now available in vue3, similar to the props option
This option can be used to define the events that the component emits to its parent object


<!-- vue2.x -->
<template>
 <div>
 <p>{{ text }}</p>
 <button v-on:click="$emit('accepted')">OK</button>
 </div>
</template>
<script>
 export default {
 props: ['text']
 }
</script>

<!-- vue3.x -->
<!--  Now and prop Similar, you can use emits To define the events emitted by the component  -->
<!--  This option also accepts the given object, which is used to send the props1 Sample verifies the passed parameters  -->
<!--  It is strongly recommended to record all issued by each component emits , because it has been removed .native Modifier, all listeners that do not use declared events will be included in the built $attr By default, the listener is bound to the root node of the component  -->
<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 vue3 component incompatible changes in detail, more information about vue3 component incompatible changes please pay attention to other related articles on this site!


Related articles: