微信小程序> 微信小程序父子组件传值通信

微信小程序父子组件传值通信

浏览量:1671 时间: 来源:loverxy丶Du

微信小程序自定义组件

微信小程序 父子组件传值通信

//引用自定义组件的页面 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  },

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎