封装一个小程序的原生组件
<view>
<select size="large" onChange="onChange" dataSource="{{dataSource}}" style="width: 300" />
</view>import fmtEvent from "../utils/fmtEvent.js"
Component({
mixins: [], // minxin 方便复用代码
data: {
}, // 组件内部数据
props: {
dataSource:[
{label:'option1', value:'option1'},
{label:'option2', value:'option2'},
{label:'disabled', value:'disabled11' ,disabled:true}],
placeholder:'请选择',
// disabled:false,
// value:'',
// defaultValue:'',
// mode:'single',
// hasClear:false,
// showSearch:false,
// hasSelectAll:false,
onChange:function onChange(){}
// state:'error'
}, // 可给外部传入的属性添加默认值
didMount(){
}, // 生命周期函数
didUpdate(){},
didUnmount(){},
methods: { // 自定义方法
onChange(e) {
var event = fmtEvent(this.props,e)
console.log(event)
this.props.onChange(event)
},
},
})uni vue中引用组件
<view style="float:left;">
<all-select @change="onChange"></all-select>
</view>无法获取事件
onChange(e){
console.log(e)//打印undefind
},
2 个回复
DCloud_UNI_GSQ
后续会支持使用vue的事件绑定方式，当前方案参考：
支付宝小程序组件事件监听示例
DCloud_UNI_GSQ
HBuilderX 3.1.0 alpha 已支持使用 vue 事件监听方式