vue3在main.ts里全局挂载了个属性,组件里怎么仔在setup里引用
时间: 2024-03-12 15:49:19 浏览: 144
如果你在 `main.ts` 中全局挂载了一个属性,你可以在组件中使用 `inject` 函数来引用它。首先,在 `main.ts` 中使用 `app.config.globalProperties` 来挂载全局属性,例如:
```typescript
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 在这里挂载全局属性
app.config.globalProperties.$myGlobalProperty = 'some value'
app.mount('#app')
```
然后在组件的 `setup` 函数中使用 `inject` 函数来引用这个全局属性,例如:
```typescript
import { defineComponent, inject } from 'vue'
export default defineComponent({
setup() {
// 使用 inject 函数来引用全局属性
const myGlobalProperty = inject('$myGlobalProperty')
return {
myGlobalProperty
}
}
})
```
这样,你就可以在组件中访问 `$myGlobalProperty` 这个全局属性了。需要注意的是,`inject` 函数的第一个参数是要注入的属性名称,即 `$myGlobalProperty`,它是一个字符串类型的值。如果这个属性不存在,则 `inject` 函数会返回 `undefined`。如果你需要为这个全局属性提供默认值,可以使用 `inject` 函数的第二个参数:
```typescript
const myGlobalProperty = inject('$myGlobalProperty', defaultValue)
```
其中,`defaultValue` 是当 `$myGlobalProperty` 这个全局属性不存在时的默认值。
阅读全文