vue3 + ts 组件全局挂载
1. 生成组件
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53<template> <button class="m-button" :class="type"> <slot></slot> </button> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'mButton', components: {}, props: { // 按钮类型 type: { type: String, default: 'default' }, // 是否朴素 plain: { type: Boolean, default: false }, // 是否边框 圆 round: { type: Boolean, default: false }, // 是否圆形 circle: { type: Boolean, default: false } }, setup() { return {} } }) </script> <style scope lang="scss"> .default { color: $--button-default-font-color; background-color: $--button-default-background-color; border-color: $--button-default-border-color; font-size: $--button-font-size; font-weight: $--button-font-weight; border-radius: $--button-border-radius; padding: $--button-padding-vertical $--button-padding-horizontal; } </style>
2. install
新建一个index.ts文件,引入上面的组件,并且install
复制代码
1
2
3
4
5
6
7
8import mButton from './src/button.vue' import { App } from 'vue' const components = { install: (Vue: App): void => { Vue.component(mButton.name, mButton) } }
3. 导出
在 index.ts 中将定义的 components 导出
复制代码
1
2export default components
4. createApp.use
main.ts 中引入上面的index.ts文件,并且createApp.use在vue中使用
复制代码
1
2
3
4
5
6
7
8import { createApp } from 'vue' import App from './App.vue' import mButton from '@/components/button/index' const app = createApp(App) app.use(mButton) app.mount('#app')
Tips:
组件的命名是在index.ts 中的install中的mButton.name 中定义。也就是在 button.vue文件中的name属性。
最后
以上就是耍酷导师最近收集整理的关于vue3 + ts 组件全局挂载vue3 + ts 组件全局挂载的全部内容,更多相关vue3内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复