Vue3.0 挂载方法,添加全局属性
# 方式一
使用 app.config.globalProperties,在 main.js 中引入全局要使用的方法,通过 app.config.globalProperties 添加到全局中。
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 假设 config 是外部引入的配置文件
import config from './config'
const app = createApp(App)
// 添加到全局中
app.config.globalProperties.$config = config
// app.use(config)
app.use(store).use(router).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
通过在生命周期函数中通过 this 使用或在 getCurrentInstance 的 appContext 使用,appContext获取的即为 main.js 里创建的的 vue 对象。
// Home.vue
// js写法中会使用 defineComponent,普通的写法不用在意
import { defineComponent, getCurrentInstance } from 'vue'
export default defineComponent({
name: 'Home',
setup() {
// js proxy 使用
const { proxy }: any = getCurrentInstance()
// js
/* const { proxy } = getCurrentInstance() */
console.log(proxy, proxy.$config)
// js appContext 使用
const { $config } = getCurrentInstance().appContext.config.globalProperties
console.log($config)
},
created() {
console.log(this.$config)
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 方式二
通过 依赖和注入( provide 和 inject) 来完成,我这里是通过 symbol 方式定义的这个常量,大家可以根据自己使用方式在 app.provide('xxx') 的时候,使用自定义的字符串,只要使用起来不会混乱即可。
src 文件夹下新建 symbol 文件夹并新增index.js文件
// src/symbol/index.js
// 定义对应的 symbol 并暴露出去
export const TEST_SYMBOL = Symbol('Test 测试')
1
2
3
2
3
在 main.js 中引入,并使用 project 绑定依赖
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { TEST_SYMBOL } from './symbol'
// 假设 test 是外部引入的方法
const test = () => {
console.log('ccccc')
return '测试成功888'
}
const app = createApp(App)
// 使用 symbol 方式
app.provide(TEST_SYMBOL, test)
// 使用自定义字符串方式
app.provide('$test', test)
app.use(store)
app.use(router)
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
在对应.vue文件中引入并使用
import { defineComponent, inject } from 'vue'
import { TEST_SYMBOL } from '@/symbol'
export default defineComponent({
setup() {
// js 中它的类型可能是个undefined
// symbol 方式
const $Test: (() => string) | undefined = inject(TEST_SYMBOL)
$Test && $Test()
// 自定义字符串方式
const $Test2: (() => string) | undefined = inject('$Test')
$Test2 && $Test2()
// js
/*
const $Test = inject(TEST_SYMBOL)
$Test()
*/
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
注意
关于上面两种方式在 vuejs/rfcs (opens new window) 中有相关讨论,看 尤大 的意思是vue3.0 不推荐 方式一 在原型链上挂载一些东西这种方式,而是更建议使用 方式二 的 provide 和 inject 方式,
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13