微信小程序 父子組件傳值通信

微信小程序自定義組件

微信小程序 父子組件傳值通信

//引用自定義組件的頁面 page.json
{
  "usingComponents": {
     "v-banner": "/components/banner/index",
     "v-cart": "/components/cart/index"
  }
}

<v-banner><v-banner>

子組件：

wxml:
<view bindtap='change'> 123 
    <view wx:for="{{imgs}}"></view>
</view>

wx.js:
data: {
    current:0
  },
 * 組件的屬性列表
   */
  properties: {
    // v:String,
    // n:Number
    imgs:Array 
  },
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
  })
}