微信小程序自定义组件
微信小程序 父子组件传值通信
//引用自定义组件的页面 page.json{ "usingComponents": { "v-banner": "/components/banner/index", "v-cart": "/components/cart/index" }}v-bannerv-banner子组件:
wxml:view bindtap='change' 123 view wx:for="{{imgs}}"/view/viewwx.js:data: { current:0 }, * 组件的属性列表 */ properties: { // v:String, // n:Number imgs:Array productAttr:{ type: Object, value: [], //{} }, },vue:props:{ btnvalue:{ type:[Number,String], default:10, required:true },change(e){ console.log(e.detail.current) this.setData({ current: e.detail.current }) this.triggerEvent("c", e.detail.current) !!!!! }父组件:
wxml:my-swiper bind:c='changeFn' imgs="{{urls}}"/ !--子组件就要定义imgs的属性列表 imgs:Array--wx.js:data: { now:0, urls:[ "/imgs/01.jpg", "/imgs/02.jpg", "/imgs/03.jpg", "/imgs/04.jpg", "/imgs/05.jpg", "/imgs/06.jpg" ] },changeFn(e){ console.log(e) this.setData({ now:e.detail })}父组件直接绑定事件authorize bind:onLoadFun='onLoadFun'/authorizeonLoadFun: function () { this.setLeveLComplete(); this.getLocation(); },传多个值、绑定多个事件:事件在页面js中
页面上的组件:product-window storeInfo="{{storeInfo}}" productAttr="{{productAttr}}" productSelect="{{productSelect}}" bind:ChangeAttr="ChangeAttr" bind:ChangeCartNum="ChangeCartNum" id='product-window'/product-window子组件值的接收:Component({ properties: { storeInfo:{ type: Object, value: {} }, productAttr:{ type: Object, value: [], }, productSelect:{ type: Object, value: { image: '', store_name: '', price: 0, unique: '', stock:0, } }, },)vue.js:props:{ btnvalue:{ type:[Number,String], default:10, required:true },













