利用app.use特性全局注册组件

将之前做的两个图标选择器组件和省市区选择器组件进行全局注册.这样之后若是要在某一个地方使用可以不用再单独引入

1.在对应的component文件夹下的文件夹下创建index.ts文件

分别写入
(1)components/chooseArea/index.ts

import { App } from 'vue'
import chooseArea from './src/index.vue'

// 让这个组件可以通过use的形式使用
export default {
   install(app: App) {
       app.component('m-choose-area',chooseArea)
   }
}

(2)components/chooseIcon/index.ts

import { App } from 'vue'
import chooseIcon from './src/index.vue'

// 让这个组件可以通过use的形式使用
export default {
    install(app: App) {
        app.component('m-choose-icon',chooseIcon)
    }
}

2.在component文件夹下创建index.ts文件

component/index.ts

import { App } from 'vue';
import chooseArea from "./chooseArea";
import chooseIcon from "./chooseIcon";



const components = [
    chooseArea,
    chooseIcon
]

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

3.在main.ts全局引入

import mUI from './components'

app.use(mUI)

你可能感兴趣的:(利用app.use特性全局注册组件)