vue组件注册

文件结构

-src
  -- ...
  --components
    --my-button
      --src
        --index.vue 组件代码
      --style
        --style.css 组件样式如果过多，可以单独件放在文件中，在组件中引入
    --my-input
     --src
       --index.vue
     --style
       --style.css
    --index.js //多组件注册时，在这里统一添加install方法

vue2

全局注册

Vue.component

• 统一处理组件 ```javascript // src/components/index.js // 引入封装好的组件 import MyButton from ‘./my-button/src/index.vue’ import MyInput from ‘./my-input/src/index.vue’

// 将来如果有其它组件,都可以写到这个数组里 const components = [ MyButton, MyInput ] // 导出组件 export default components

- 注册组件
```javascript
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
// 导入统一处理的组件
import components from './components/index'
const app = createApp(App)
// Vue.component批量注册全局组件
components.map(component => {
  app.component(component.name, component)
})
app.mount('#app')

以插件的形式注册

• 组件添加install方法
• 组件注册为全局组件，用到了Vue.component()方法，当使用Vue.use()时，install方法便会执行 ```javascript // src/components/index.js // 引入封装好的组件 import MyButton from ‘./my-button/src/index.vue’ import MyInput from ‘./my-input/src/index.vue’

// 将来如果有其它组件,都可以写到这个数组里 const components = [ MyButton, MyInput ]

// 批量组件注册 const install = function (vue) { components.map(component => { vue.component(component.name, component) }) } // 这个方法以后再使用的时候可以被use调用 export default { install }

- 全局注册
```javascript
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import MyUi from './components/index'
const app = createApp(App)
app.use(MyUi)
app.mount('#app')

局部注册

<template>
  <div id="app">
    <!-- 3.应用自定义组件 -->
    <my-button></my-button>
  </div>
</template>
<script>
// 1.导入组件
import MyButton from '../my-button/src/index.vue'
export default {
  name: "App",
  components: {
    // 2.注册局部组件
    MyButton,
  },
};
</script>
<style>
</style>

vue3

全局注册

• 手动注册组件
  • 和vue2注册全局组件相同
• 批量注册全局组件 ```javascript / require.context() 是webpack提供的一个自动导入的API vite项目中使用import.meta.globEager/import.meta.glob 参数1：加载的文件目录 参数2：是否加载子目录 参数3：正则，匹配文件 /

//keys() 获取读取到的所有文件列表 const importFn = require.context(‘./‘, false,/.vue$/) export default { install(app) { importFn.keys().forEach(key => { // 导入组件 const component = importFn(key).default // 注册组件 app.component(component.name, component) }) } }

//导入main.js import UI(自定义) from ‘./你写的路径’ createApp(App).use(store).use(router).use(UI).mount(‘#app’)

```javascript
import { defineAsyncComponent } from 'vue'
const components = import.meta.glob('./*/src/*.vue')
console.log(components);
export default function install (app) {
  for (const [key, value] of Object.entries(components)) {
    // 因为我设计的是组件名称就是目录名称，所以这里这样取，也可以根据vue的文件名称，看个人喜好
    const name = key.split('/')[1]
    // 这里的main是我的layout，不需要注册为公共组件
    if (name !== 'main') {
      app.component(name, defineAsyncComponent(value))
    }
  }
}
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import components from './components/index'
const app = createApp(App)
app.use(components)
app.mount('#app')

局部注册

• 在单文件组件中使用了<script setup>，导入的组件会自动进行局部注册 ```javascript

- 如果不使用`<script setup>`，你需要使用`components`选项
```javascript
import ComponentA from './ComponentA.js'
export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}