vue全局组件在uni-app微信小程序正常支付宝小程序报错ref未定义

vue全局组件在uni-app微信小程序正常支付宝小程序报错ref未定义

操作步骤:

  1. 创建组件
  2. main.js全局引入组件
  3. 页面加入组件但不申明组件ref

预期结果:

正常应该无需定义ref (微信小程序就不需要)支付宝小程序不定义这个就报错
const eToast = ref(null)

实际结果:

(index):1 ReferenceError: eToast is not defined
at a (list.js:143:1)
at jm (vendor.js:7425:1)
at Object.xm [as __r] (vendor.js:7408:1)
at e.invokePublicMethod (af-appx.worker.min.js:6:203364)
at i.onComponentRefBind (af-appx.worker.min.js:6:213296)
at af-appx.worker.min.js:6:323414
at e.performLifecycle (af-appx.worker.min.js:6:323520)
at e.performRunloop (af-appx.worker.min.js:6:323665)
at e.onMount (af-appx.worker.min.js:6:305803)
at e.bootstrap (af-appx.worker.min.js:6:202528)

bug描述:

全局组件

import Toast from "@/components/Toast/Toast.vue"  
export function createApp() {  
  const app = createSSRApp(App)  
  app.config.globalProperties.$showToast = showToast  
  app.component('Toast',Toast)  
  app.use(store)  
  app.use(i18n)  
  return {  
    app  
  }  
}

除了首页不报错以外其它所有页面均报错
每个页面均已申明
但是未定义ref eToast

<Toast ref="eToast"/>

是每个页面还必须定义ref才行?

图片

Image 1

Image 2


更多关于vue全局组件在uni-app微信小程序正常支付宝小程序报错ref未定义的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

本来每个页面都需要在代码里面加入组件代码已经很鸡肋了,现在还必须定义组件ref

更多关于vue全局组件在uni-app微信小程序正常支付宝小程序报错ref未定义的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是支付宝小程序平台与微信小程序平台在组件引用机制上的差异导致的。支付宝小程序对全局组件的引用要求更严格,必须显式声明ref才能正确访问组件实例。

解决方案:

  1. 在支付宝小程序中,必须为全局组件定义ref:
<Toast ref="eToast"/>
  1. 同时在script中声明ref:
const eToast = ref(null)
回到顶部