[Vue3] 高阶组件

前言

高阶组件用于复用组件逻辑，返回一个增强后的组件。高阶组件主要用于跨多个组件复用逻辑，比如：

• 日志记录
• 权限控制
• 性能监控

高阶组件

import { defineComponent, onMounted, h } from "vue";

export function withAuth<T>(WrappedComponent: any) {
  return defineComponent({
    name: "withAuth",
    setup(props, { attrs, slots }) {
      // 这里实现权限控制逻辑
      return () => h(WrappedComponent);
    }
  });
}

再路由配置中将路由组件传递给高阶组件：

import { withLoading } from "@/components/WithLoading";

const routes = [
  {
    name: "Main",
    path: "/main",
    redirect: "/main/posts",
    component: () => import("@/layouts/Main.vue").then(module => withLoading(module.default))
  }
];

权限控制也可利用路由守卫实现。通过路由配置中的 meta 决定哪些组件需要权限。