重学vue中组件细节、动态组件、异步组件

一、组件细节点

• 子组件中的data，一定是个方法哈
• 父组件要传递给孙子组件（瞎说的孙子组件，哈哈哈），可以使用provide与inject直接传递，下面是代码

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

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

二、动态组件

感觉就和slot类似，只不过反转来，在父组件中留位置，子组件传递过来，上代码。

父组件中

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

也就是说component是预留的位置，which是那个子组件，component就替换为那个子组件

• keep-alive可以缓存动态组件的信息，每次切换时候，上一次信息被记录起来

异步组件

• 意义：可以通过异步的方式加载子组件，而不是直接加载完。

注册异步组件

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