如何在<script setup lang="ts"></script>里引用到全局挂载的属性
时间: 2023-12-08 22:02:54 浏览: 137
基于uniapp+ts 开发小程序的项目最佳实践模板,支持快速迭代,二次开发
在 `<script setup>` 中,我们也可以使用 `inject` 函数来访问全局挂载的属性。
首先,在 `main.ts` 文件中,我们可以将全局属性添加到 Vue 实例中:
```typescript
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$myGlobalProperty = 'Hello World'
app.mount('#app')
```
在上述代码中,我们通过 `app.config.globalProperties` 将 `$myGlobalProperty` 添加到了 Vue 实例中,并将其设置为字符串 `'Hello World'`。
然后,在 `<script setup>` 中,我们可以使用 `inject` 函数来访问全局属性。例如:
```typescript
import { defineComponent, inject } from 'vue'
export default defineComponent({
setup() {
const myGlobalProperty = inject('$myGlobalProperty')
console.log(myGlobalProperty) // 输出:'Hello World'
return {
myGlobalProperty
}
}
})
```
在上述代码中,我们使用 `inject` 函数来注入全局属性 `$myGlobalProperty`,并将其赋值给了 `myGlobalProperty` 变量。
需要注意的是,在 `<script setup>` 中,我们不需要使用 `return` 语句来返回组件的数据和方法,而是直接将它们导出。因此,上述代码中的 `return { myGlobalProperty }` 可以改为 `export default { myGlobalProperty }`。
另外,需要注意的是,`inject` 函数只能在 `<script setup>` 中使用。如果你在组件的其他地方使用 `inject` 函数,它会返回 `undefined`。
阅读全文