vue动态组件

什么是动态组件？

动态组件指的是动态切换组件的显示与隐藏

实现动态组件

vue 内置的 <keep-alive> 组件可以保持动态组件的状态。

<template>
  <div id="app">
    <div>
      <button @click="tab(1)">购物车页面</button>
      <button @click="tab(2)">订单页面</button>
    </div>
    //keep-alive标签保持状态
    <keep-alive>
      <components :is="currentTabComponent"></components>
	</keep-alive>
  </div>
</template>

import Cart from "./components/Cart.vue";
import Order from "./components/Order.vue";
export default {
  name: "App",
  data() {
    return {
      currentTabComponent: Cart
    };
  },
  components: {
    Cart,
    Order,
  },
  methods: {
    tab(type) {
      if (type === 1) {
        this.currentTabComponent = Cart;
      } else if (type === 2) {
        this.currentTabComponent = Order;
      }
    },
  },
};