vue3.0中的is动态组件方法和keep-alive

前言：

       vue3.0中新推出一个方法是  is  绑定，主要是绑定动态组件的。页面上只需要：

 <component :is="变量"></component>

vue3.0官网入口

目录：

动态组件（用is绑定的）

实现效果：

 实现步骤：

1、首先定义两个组件，aBoo.vue  和  aBooT.vue，我这里是定义全局组件，然后页面只要输入名字就可以使用，具体方法入口

2、页面上：

 3、js方法中：

缓存动态组件：

---

动态组件（用is绑定的）

实现效果：

 实现步骤：

1、首先定义两个组件，aBoo.vue  和  aBooT.vue，我这里是定义全局组件，然后页面只要输入名字就可以使用，具体方法入口

2、页面上：

<!--切换动态组件-->
    <el-button @click="changeComponent(1)">切换到a组件</el-button>
    <el-button @click="changeComponent(2)">切换到b组件</el-button>
    <component :is="otherParam.currentTabComponent"></component>

 3、js方法中：

setup () {
    let otherParam = reactive({
      currentTabComponent:'a-boo' //定义变量，并设置默认组件
    })

    //定义方法
    const changeComponent = (type)=>{
      if(type === 1){
        otherParam.currentTabComponent = 'a-boo'
      }else{
        otherParam.currentTabComponent = 'a-boo-t'
      }
    }

    return {
      otherParam,

      changeComponent

    }


}

缓存动态组件：

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component :is="otherParam.currentTabComponent"></component>
</keep-alive>