我是靠谱客的博主 耍酷导师,这篇文章主要介绍vue3 + ts 组件全局挂载vue3 + ts 组件全局挂载,现在分享给大家,希望可以做个参考。

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
8
import 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
2
export default components

4. createApp.use

main.ts 中引入上面的index.ts文件,并且createApp.use在vue中使用

复制代码
1
2
3
4
5
6
7
8
import { 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内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(104)

评论列表共有 0 条评论

立即
投稿
返回
顶部