全局

2023年03月16日

柏拉文

越努力，越幸运

一、认识

---

全局注册的组件。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中

二、语法

---

2.1 同步

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

2.2 异步

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

• 方式一、工厂函数import: 在工厂函数中返回一个 Promise。import() 入会返回一个 Promise 对象。这个特殊的 import() 语法将会告诉 webpack。自动将你的构建代码切割成多个包，这些包会通过 Ajax 请求加载

  Vue.component("AComponent",()=> import("./components/A.vue"))

• 方式二、工厂函数调用resolve回调: 工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。这个特殊的 require 语法将会告诉 webpack。自动将你的构建代码切割成多个包，这些包会通过 Ajax 请求加载

  Vue.component("AComponent",(resolve)=>{
    setTimeout(()=>{
      require(['./components/A.vue'],resolve)
    },3000)
  })

• 方式三、工厂函数配置加载状态

  加载状态

  Vue.component("AComponent", () => ({
    component: import("./components/A.vue"),
    loading: "加载中",
    error: "加载失败",
    delay: 200,
    timeout: 3000,
  }));

三、自动化注册

---

3.1 Vite 中自动化全局注册

3.2 Webpack 中自动化全局注册

import Vue from "vue";
import App from "./App.vue";

const getComponentName = (fileName) => {
  return fileName
    .split("/")
    .pop()
    .replace(/\.\w+$/, "");
};

const requireComponent = require.context("./components", false, /\w+\.(vue)$/);
requireComponent.keys().forEach((fileName) => {
  const componentConfig = requireComponent(fileName);
  const componentName = getComponentName(fileName);
  Vue.component(componentName, componentConfig.default || componentConfig);
});

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");