一般在小程序中引入自定义组件是这样的:
外部使用传递 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);
}}