Vue3.0+Typescript项目中注册全局自定义组件的方法

Vue3.0+Typescript项目中注册全局自定义组件的方法

1. 第一步, 在src/components下面自定义一个目录, 新建.vue开发自己的组件!(以我开发的组件为例!), 结构如下:

• AreaChooser是自定义组件, index.vue是测试用例组件, index.ts是导入, 注册组件的文件

2. 第二步: 在index.ts中编写注册全局组件的方法, 代码如下:

import {App} from 'vue'
import AreaChooser from "./AreaChooser.vue";

export default {
    install(app: App) {
        app.component('AreaChooser', AreaChooser)
    }
}

3. 第三步: 在compoenents下面同样注册一个index.ts的文件, 把对所有组件的注册全部导入进来, 形成一个数组, 遍历该数组, 并分别调用app.use(), 而app.use()会自动调用其中的install(), 最终实现全局组件的注册!

import {App} from "vue";
import AreaChooser from "./AreaChooser/index";
import IconChooser from "./IconChooser";

const components = [
    AreaChooser,
    IconChooser
]

export default {
    install(app: App) {
        components.map(item => {
            app.use(item)
        })
    }
}

4. 最后, 把components/index.ts导入项目的入口文件 main.ts, 并app.use(components), 实现了链式调用, 组件全部都会变成全局组件!

//main.ts
import components from "./components";

const app = createApp(App)
app.use(components)
   .mount('#app')