uni-app Script Setup 写法下，template dom节点下事件逻辑处理中uni报错没有定义

在uni-app中使用 <script setup> 语法糖时，如果在 template 的 DOM 节点下的事件逻辑处理中遇到 uni 报错没有定义的问题，通常是因为在 <script setup> 中直接引用全局对象（如 uni）的方式与传统的 <script> 语法有所不同。在 <script setup> 中，你需要确保正确引入和使用全局对象。

原因分析

在 <script setup> 中，顶层绑定（如 this）被禁用，且组件的上下文自动暴露为 setup 函数的参数。由于 uni 对象是一个全局对象，在 <script setup> 中直接使用它可能会导致作用域问题。

解决方案

方法一：确保在 <script setup> 中正确引用全局对象

虽然 uni 是一个全局对象，但在 <script setup> 中，你通常不需要显式引用它，因为它应该已经全局可用。如果遇到未定义的问题，请检查你的项目配置或确保你的代码没有意外地覆盖了全局 uni 对象。

方法二：使用组合式 API 封装逻辑

为了避免直接在模板中使用全局对象可能带来的问题，你可以使用组合式 API 来封装你的逻辑。例如，你可以创建一个自定义的组合函数来处理与 uni 相关的逻辑。

代码示例

假设你想在点击按钮时调用 uni.showToast，你可以这样做：

<template>
  <button @click="showMessage">Click Me</button>
</template>

<script setup>
import { ref } from 'vue';

// 封装一个函数来调用 uni.showToast
const showMessage = () => {
  uni.showToast({
    title: 'Hello, uni-app!',
    icon: 'none'
  });
};
</script>

在这个例子中，showMessage 函数封装了对 uni.showToast 的调用，并在模板中通过 @click 事件绑定到这个函数。这种方式确保了你的逻辑被正确地封装和调用，同时避免了直接在模板中引用全局对象可能带来的问题。

总结

在 uni-app 中使用 <script setup> 时，如果遇到全局对象（如 uni）未定义的问题，请检查你的代码是否正确地使用了全局对象，或者考虑使用组合式 API 来封装你的逻辑。通过封装逻辑，你可以提高代码的可维护性和可读性，同时避免潜在的作用域问题。