uni-app vue3脚本安装程序无法在其他vue组件中找到globalData。

Question

我在uni-app中使用uni-app安装程序，并且添加了globalData，但是它在安装糖中不起作用：

App.vue

<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
onLaunch(() => {
  console.log("App Launch");
});
onShow(() => {
  console.log("App Show");
});
onHide(() => {
  console.log("App Hide");
});
const globalData = {
  text: 'mytext'
}
</script>

我不能把globalData放进我的index.vue

const app = getApp() as any;
let text = app.globalData.text;

但是，当我将它从setup中删除时，它就运行得很好。

App.vue

<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
onLaunch(() => {
  console.log("App Launch");
});
onShow(() => {
  console.log("App Show");
});
onHide(() => {
  console.log("App Hide");
});

</script>

<script lang="ts">  
    export default {  
        globalData: {  
            text: 'mytext'  
        }
    }  
</script>

如何使用setup解决该问题

Answer 1

来自Vue 3文档

在默认情况下，使用<script setup>的组件是关闭的--也就是说，通过模板参考或$parent链检索的组件的公共实例不会公开在<script setup>中声明的任何绑定。 要显式地公开<script setup>组件中的属性，请使用defineExpose编译器宏:当父实例通过模板refs获得该组件的实例时，检索到的实例将是形状{ a: number, b: number } (refs自动展开，就像在普通实例上一样)。

在您的例子中，公开globalData

<script setup lang="ts">
⋮
const globalData = {
  text: 'mytext'
}

defineExpose({ globalData })
</script>

演示