直接点击事件，报错
30天内只能修改
- 发布：2024-06-05 10:13
- 更新：2024-06-19 08:04
- 阅读：804
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 11
HBuilderX类型： 正式
HBuilderX版本号： 4.15
第三方开发者工具版本号： 1
基础库版本号： 1
项目创建方式： HBuilderX
操作步骤：
预期结果：
点击，调用子组件方法
点击，调用子组件方法
实际结果：
点击报错
点击报错
bug描述：
子组件defineExpose导出方法，父组件声明ref，赋值ref，方法调用.value.method，小程序报错，打印ref值为null
最佳回复
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
问题已解决
技术分析
发现是判断当前文件是否为 App.vue 的时候逻辑不严谨，忽略了用户设置路由为 xxxApp.vue的情况，也就是你的 newApp.vue，使用通用的判断方案即可解决。下次发版生效
临时解决方案
你可以使用下面的附近，解压替换到 node_modules/@dcloudio/uni-cli-shared/dist/utils.js
如果是 hbuiderx 则是 HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-cli-shared/dist
如有问题，请继续反馈。
爱豆豆 - 办法总比困难多
我这测试是可以正常调用子组件方法的 你可以发一下demo吗？帮你测一下
-
30天内只能修改 (作者)
<template>
<view @click="open">
test
</view>
<view @click="open2">
test
</view>
<dialog-com ref="dia">
<template #content>
<view>1</view>
</template>
</dialog-com>
<dialog-com ref="dia1">
<template #content>
<view>2</view>
</template>
</dialog-com>
</template>
<script setup>
import {ref} from 'vue'
import dialogCom from '/components/dialogCom/dialogCom.vue'
const dia = ref()
const dia1 = ref()
function open(){
dia.value.show()
}
function open2(){
dia1.value.show()
}
</script>
<style>
</style>
-------------------------------------子组件------------------------------------------
<template>
<view class="maskBox" v-if="isShow">
<view class="contentBox">
<image @click="isShow = false" class="closeIcon" style="width: 32rpx;height: 32rpx;" src="/static/close.png" mode=""></image>
<view class="title fc-25 fs-36 fs-b">
{{title}}
</view>
<slot name="content"></slot>
<view class="btns">
<view class="btn fs-32 fc-69 active" @click="emit('ok')">{{okText}}</view>
<view class="btn" @click="emit('cancel')" v-if="showCalcel">{{cancelText}}</view>
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
defineEmits,
defineProps
} from 'vue'
const props = defineProps({
okText: {
type: String,
default: () => '确定'
},
cancelText: {
type: String,
default: () => '取消'
},
title: String,
default: () => '',
showCalcel: Boolean,
default: () => true,
})
const emit = defineEmits(['ok', 'cancel'])
const isShow = ref(false)
function show(){
isShow.value = true
}
function hide(){
isShow.value = false
}
defineExpose({
show,
hide
})
</script>
// <script>
// export default {
// props: {
// okText: {
// type: String,
// default: () => '确定'
// },
// cancelText: {
// type: String,
// default: () => '取消'
// },
// title: String,
// default: () => '',
// showCalcel: Boolean,
// default: () => true,
// },
// methods: {
// show(){
// isShow.value = true
// },
// hide(){
// isShow.value = false
// }
// }
// }
// </script>
<style lang="scss" scoped>
.maskBox{
.contentBox{
position: relative;
background: white;
width: calc(100% - 64rpx);
padding: 40rpx;
.title{
text-align: center;
margin-top: 40rpx;
margin-bottom: 24rpx;
}
.closeIcon{
position: absolute;
right: 20rpx;
top: 20rpx;
}
}
}
.btns {
display: flex;
justify-content: space-around;
align-items: center;
.btn {
font-size: 32rpx;
font-weight: 500;
margin-top: 32rpx;
height: 88rpx;
width: 254rpx;
text-align: center;
line-height: 88rpx;
border-radius: 4rpx;
border: 1rpx solid var(--borderC);
flex: 1;
&.active {
color: #fff;
background-color: var(--colorO);
border: 1rpx solid var(--colorO);
}
}
}
</style>2024-06-05 11:11
-
爱豆豆 - 办法总比困难多
运行你提供的代码片段后 也是可以正常调用子组件内的方法的
你建一个空项目吧你的代码复制进去 试试能不能复现 如果不能复现的话 应该是你项目内其他地方的问题了
你可把你现在的项目 去除敏感文件或配置后 打一个zip压缩包 发出来 我帮你测试下
-
-
-
-
-
-
-
-
-
排查出来了 不是uniapp的问题 uni的编译是对的 在微信端只要是newApp命名的页面都无法使用自定义组件 也就没有ref 所以才报错了 小程序原生搭建的项目也会出现这个问题 所以属于微信小程序端的问题 可能这newApp是他们保留的关键词 你要去微信小程序的社区问下他们的官方人员了
2024-06-05 17:38
-
-
-
-
-
-
-
-
-
30天内只能修改 (作者)
@DCloud_UNI_OttoJi 你看截图，newApp。test，和另外一个文件夹里的test，这3个代码完全一样复制的。newApp原来是真实业务代码，后来我复制了一份，起名newAppcopy。然后把tabbar改成这个newAppcopy，发现newAppcopy可以用了。但是newApp不管是之前的真实业务代码，还是用来测试这个调用子组件方法的demo代码，都不能用。hb和微信小程序开发工具都已经重启了。最后两张是便宜后微信的文件代码，一个有is=’components/dialogCom/dialogCom‘，一个没有，但是俩代码完全一样。@爱豆豆
