uni-app引入支付宝原生自定义组件(插件)通信提示事件信息不存在

814 阅读1分钟

一般在小程序中引入自定义组件是这样的:

外部使用传递 props

注意: 外部使用自定义组件时,如果传递参数是函数,一定要以 on 为前缀,否则会将其处理为字符串。

//子组件(外部插件) /components/index/index.js
Component({
  data: { counter: 0 },
  // 设置默认属性
  props: {
    onCounterPlusOne: (data) => console.log(data)
  },
  methods: {
    plusOne(e) {
      this.props.onCounterPlusOne("我是插件"); // axml中的事件只能由methods中的方法响应
    },
  },
});

<!-- /pages/index/index.axml -->
<my-component extra="external extra" onCounterPlusOne="counterPlusOne" />Page({
  counterPlusOne(data) {    console.log(data);
  }
});

但是在uni-app在开发过程中,碰到支付宝原生组件混合开发,uni-app开发的页面(父),引入了支付宝原生小程序自定义组件(子),在给子组件传入父组件方法时,用@callBackMethedName="callBackMethedName"传入,子组件在调用时,会提示事件信息不存在

解决办法:

原生的支付宝小程序组件在引用时,传入的方法需要以on开头(on开头的是支付宝原生小程序里用来调用的)

页面在onload里,把方法手动绑定在this.$scope上。

<my-component onCounterPlusOne="counterPlusOne" />

onLoad() {
    this.$scope.counterPlusOne = this.counterPlusOne.bind(this)
}
methods() {
counterPlusOne(data) {
    console.log(data);
 }}