Vue动态组件和异步组件

1.动态组件

 当我们想要动态切换展示的组件时，就需要动态组件这种语法。可以随时动态切换组件

 

 const app = Vue.createApp({
      data() {
        return { currentItem: "input-item" };
      },
      methods: {
        handleClick() {
          if (this.currentItem === "input-item") {
            this.currentItem = "common-item";
          } else {
            this.currentItem = "input-item";
          }
        },
      },
      template: `
        //利用keep-alive标明是动态组件
       <keep-alive>
        // is用来指定现在展示哪个组件
        <component :is="currentItem" />
       </keep-alive>
        <button @click="handleClick">切换</button>
        `,
});
 app.component("input-item", {
      template: `
            <input/>
        `,
    });
 app.component("common-item", {
      template: `
            <div>hello world</div>
        `,
    });

 2.异步组件

异步组件 异步执行某些组件的逻辑 

 const app = Vue.createApp({
      template: `
    
          <div>
        
            <async-common-item/>  
         </div>
        `,
 });
app.component(
      "async-common-item",
        //定义异步组件
      Vue.defineAsyncComponent(() => {
         //使用promise异步返回一个模板
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve({
              template: `<div>this is an async component</div>`,
            });
          }, 4000);
        });
      })
);