【Vue3 从入门到实战进阶式掌握完整知识体系】017-探索组件的理念：动态组件和异步组件

今天药忘吃喽~ 2023-10-03 09:34 9阅读 0赞

### 文章目录 ###

*   *  8、动态组件和异步组件
     *   *  动态组件
         *  运行结果
         *  内容缓存
         *  运行结果
         *  异步组件
         *  运行结果

## 8、动态组件和异步组件 ##

### 动态组件 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            currentItem: 'input-item'
          }
        },
        methods:{
         
          shift(){
         
            if(this.currentItem === 'input-item'){
         
              this.currentItem = 'common-item'
            }else{
         
              this.currentItem = 'input-item'
            }
          }
        },
        template: `
            <div>
              
              
              
              <component :is="currentItem" />
              <button @click="shift()">切换</button>
            </div>
        `
      });
    
      
      app.component('input-item',{
         
        template: `
            <input />
        `
      });
    
      app.component('common-item',{
         
        template: `
            <div>hello world!</div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613184438395.png][]

### 内容缓存 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            currentItem: 'input-item'
          }
        },
        methods:{
         
          shift(){
         
            if(this.currentItem === 'input-item'){
         
              this.currentItem = 'common-item'
            }else{
         
              this.currentItem = 'input-item'
            }
          }
        },
        template: `
            <div>
              
              
              
              
              <keep-alive>
                <component :is="currentItem" />
              </keep-alive>
              <button @click="shift()">切换</button>
            </div>
        `
      });
    
      
      app.component('input-item',{
         
        template: `
            <input />
        `
      });
    
      app.component('common-item',{
         
        template: `
            <div>hello world!</div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613184819809.png][]

### 异步组件 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            currentItem: 'input-item'
          }
        },
        template: `
            <div>
              
              <common-item />
              
              <async-common-item />
            </div>
        `
      });
    
      // 异步组件
      app.component('async-common-item', Vue.defineAsyncComponent( () => {
         
        return new Promise((resolve, reject) => {
         
          // 定时执行：4秒后执行
          setTimeout(() => {
         
            // 成功时执行
            resolve({
         
              template: `
                <div>这是一个异步组件！</div>
              `
            })
          }, 4000);
        })
      }))
      
      // 同步组件
      app.component('common-item',{
         
        template: `
            <div>hello world!</div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613190328421.png][]

[image-20210613184438395.png]: https://img-blog.csdnimg.cn/img_convert/dec4eed0fd82827007f5e3fe01529e4d.png
[image-20210613184819809.png]: https://img-blog.csdnimg.cn/img_convert/1b15c20474af8423ede8018fda805d6b.png
[image-20210613190328421.png]: https://img-blog.csdnimg.cn/img_convert/c67fee8a976c530ba5a88ac9086e748f.png