uni-app新建空白项目选择vue3后使用button标签报错

uni-app新建空白项目选择vue3后使用button标签报错 编译保存文件的时候，修改data值就提示错误
是默认代码哪里需要修改的吗

onLoad() {
  this.title='111122'
}
3 回复

【社区问题/报bug正确姿势】：https://ask.dcloud.net.cn/article/38139

更多关于uni-app新建空白项目选择vue3后使用button标签报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


关键是不知道是bug还是我哪里设置的问题，没有人遇到同样的问题吗

您遇到的报错是因为在 uni-app 新建项目并选择 Vue3 版本后，默认使用的是 Vue3 的组合式 API（<script setup> 语法），而不是 Vue2 的选项式 API。在组合式 API 中，不存在 this 指向组件实例，因此 this.title 是未定义的，直接赋值会触发运行时错误。

您贴出的代码：

onLoad() {
  this.title = '111122'
}

这种写法仅适用于 Vue2 的 data 选项式写法。在 Vue3（尤其使用 <script setup>）中，应改用 ref 或 reactive 定义响应式数据，并在 onLoad 中直接操作变量，例如：

<script setup>
import { ref, onLoad } from '[@dcloudio](/user/dcloudio)/uni-app' // 实际引用路径取决于版本

const title = ref('初始值')

onLoad(() => {
  title.value = '111122'   // 注意 .value
})
</script>
回到顶部