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

微信小程序自定义组件

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

//引用自定义组件的页面 page.json
{
  "usingComponents": {
     "v-banner": "/components/banner/index",
     "v-cart": "/components/cart/index"
  }
}

子组件：

wxml:
 123 
    


wx.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：
 

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
  })
}

父组件直接绑定事件


onLoadFun: function () {
    this.setLeveLComplete();
    this.getLocation();
  },

传多个值、绑定多个事件：事件在页面js中

页面上的组件：


子组件值的接收：
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 
 },