Vue3统一导出局部组件和全局组件

December 17, 2023
测试
测试
测试
测试
3 分钟阅读

局部组件统一导出

在这里插入图片描述
在这里插入图片描述

components新增ComponentA.vueComponentB.vue两个组件 新增index.js进行组件统一导入

import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export {
    ComponentA,
    ComponentB
}

使用

<template>
  <ComponentA />
  <ComponentB />
</template>
<script setup>
import { ComponentA, ComponentB } from "./components"
</script>

全局组件统一导出

在这里插入图片描述
在这里插入图片描述

components新增global文件夹标识为全局组件 global新增Component1.vueComponent2.vue两个组件 新增index.js进行组件统一导入

import Component1 from './Component1.vue'
import Component2 from './Component2.vue'

export {
    Component1,
    Component2
}

main.js进行全局注册

import { createApp } from 'vue'
import App from './App.vue'
import * as components from './components/global'

const app = createApp(App)

Object.entries(components).forEach(([name, component]) => {
    app.component(name, component)
})

app.mount('#app')

使用

<template>
  <ComponentA />
  <ComponentB />
</template>
<script setup></script>

继续阅读

更多来自我们博客的帖子

如何安装 BuddyPress
由 测试 December 17, 2023
经过差不多一年的开发,BuddyPress 这个基于 WordPress Mu 的 SNS 插件正式版终于发布了。BuddyPress...
阅读更多
Filter如何工作
由 测试 December 17, 2023
在 web.xml...
阅读更多
如何理解CGAffineTransform
由 测试 December 17, 2023
CGAffineTransform A structure for holding an affine transformation matrix. ...
阅读更多