[Vue] 高階元件和套一層父元件的區別

前言

App.vue 的套一層佈局元件 MainLayout，MainLayout 做一些統一的佈局之外，再做一些子路由相同的邏輯，比如子路由需要許可權訪問。

但是不靈活，如果一堆路由元件中有一個不需要這個功能，就不能透過父元件巢狀統一邏輯。高階元件比起套一層父元件複用邏輯更靈活一些。

高階元件

高階元件更加關注邏輯的複用，它是一個增強元件的元件，通常透過 tsx/jsx 建立，就是一個函式建立的元件。

不增強元件時不套給元件，侵入性小。

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))
  }
];