当前位置：首页 > article >正文

『VUE』21. 组件注册（详细图文注释）

article 2024/11/9 2:58:36

组件注册

组件注册有两种方式：全局注册和局部注册。全局注册只需要注册依次,其他组件可以直接调用无需再次像局部注册一样再次注册,

全局注册虽然很方便，但有以下几个问题：

全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。

全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。

相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。

局部注册

就是我们之前使用过的注册方式.局部注册的组件在后代组件中不可用。在这个例子中，ComponentA 注册后仅在当前组件可用，而在任何的子组件或更深层的子组件中都不可用。但是因为全局注册的缺点,我一般还是喜欢用局部

在使用 <script setup> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册：

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>

没有使用 <script setup>，则需要使用 components 选项来显式注册：

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

全局注册

在main.js中

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册组件的别名  后面这个名字来调用组件
  'MyComponent',
  // 组件的实现,前面导入的组件
  {
    /* ... */
  }
)
createApp(App).mount("#app"); //挂载

全局注册示例

上节课的基础上小例子
main.js中添加全局注册

// import './assets/main.css'

import { createApp } from "vue";
import Header from "./page/Header.vue";
import App from "./App.vue";

//全局注册区域开始
const app = createApp(App);
app.component("GlobalHeader", Header);
//全局注册区域结束
app.mount("#app"); //挂载

app.vue中注释掉局部引用相关的内容

<template>
  <GlobalHeader />
  <Main />
  <Aside />
</template>

<script>
// import Header from "./page/Header.vue";
import Main from "./page/Main.vue";
import Aside from "./page/Aside.vue";

export default {
  components: {
    // Header,
    Main,
    Aside,
  },
};
</script>

<style scoped></style>