app.config.globalProperties如何在<script setup lang="ts"></script>里引用

在 `<script setup lang="ts"></script>` 中，可以使用 `defineExpose` 函数来将 `app.config.globalProperties` 暴露给模板，并在模板中直接引用。

例如，假设我们在 `app.config.globalProperties` 中定义了一个名为 `foo` 的属性，我们可以这样在 `<script setup lang="ts"></script>` 中使用它：

<script setup lang="ts">
import { defineExpose } from 'vue'

defineExpose({
  foo: app.config.globalProperties.foo
})
</script>

<template>
  <div>{{ foo }}</div>
</template>

这样就可以在模板中直接使用 `{{ foo }}` 来引用 `app.config.globalProperties.foo` 了。注意，`defineExpose` 函数必须在 `<script setup>` 中调用，并且只能调用一次。

相关问题

如何在<script setup lang="ts"></script>里引用到全局挂载的属性

在 `<script setup>` 中，我们也可以使用 `inject` 函数来访问全局挂载的属性。

首先，在 `main.ts` 文件中，我们可以将全局属性添加到 Vue 实例中：

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` 函数来访问全局属性。例如：

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`。

vue3 <script lang="ts" setup>使用vue-json-editor代码

好的，以下是在 Vue 3 `<script lang="ts" setup>` 中使用 vue-json-editor 的步骤：

1. 首先，在终端中进入项目目录，安装 vue-json-editor：

npm install vue-json-editor --save

2. 在你的组件中，导入并注册 vue-json-editor 组件：

<script lang="ts" setup>
import JsonEditor from 'vue-json-editor'

// ...
</script>

3. 在 `defineProps` 中定义接收 JSON 数据的 prop：

<script lang="ts" setup>
import JsonEditor from 'vue-json-editor'
import { defineProps } from 'vue'

const props = defineProps({
  jsonData: {
    type: Object,
    required: true
  }
})

// ...
</script>

4. 在模板中渲染 vue-json-editor 组件，并将接收到的 prop 的值绑定到 v-model 上：

<template>
  <div>
    <json-editor v-model="props.jsonData"></json-editor>
  </div>
</template>

现在，你可以在 vue-json-editor 中编辑 JSON 数据，并通过 `props.jsonData` 访问和修改它了。

注意：vue-json-editor 组件需要在全局注册 Vue 的 `$http` 对象。如果你使用的是 Axios，可以在 `main.ts` 中添加以下代码：

import axios from 'axios'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$http = axios

app.mount('#app')

这样，vue-json-editor 就可以通过 `$http` 对象发送 AJAX 请求了。