Relearn component details, dynamic components, and asynchronous components in Vue

One, component details

• The data in the subcomponent must be a method.
• To pass the parent component to the grandson component (nonsense grandson component, hahaha), you can use provide and inject to pass directly, the following is the code

//父组件
 provide() {
    
    
      return {
    
    
        data,
      }
}

//子组件
inject: ['data'],

Two, dynamic components

It feels similar to slot, except that it is reversed, leaving a position in the parent component, and the child component is passed over and the code is uploaded.

Parent component

<div>
    <component :is="which"/>
</div>

In other words, component is the reserved position, which is the subcomponent, and component is replaced with that subcomponent

• Keep-alive can cache the information of dynamic components, and each time it is switched, the last information is recorded

Asynchronous component

• Significance: You can load subcomponents asynchronously instead of directly loading them.

Register asynchronous components

  app.component('async-common-item', Vue.defineAsyncComponent(() => {
    
    
    return new Promise((resolve, reject) => {
    
    
      setTimeout(() => {
    
    
        resolve({
    
    
          template: `<div>this is an async component</div>`
        })
      }, 4000)
    })
  }))