小程序组件传值

A是父组件，B是子组件

• 父传子

<!-- 父组件A wxml -->
<view>
  <componentB paramAtoB='{{paramAtoB}}'></componentB>
</view>

//父组件Ajson （里面不能有注释）

{
  "navigationBarTitleText": "父子传值",
  "usingComponents": {
    "componentB": "../../components/son/son"
  }
}

//父组件A js
// view/father/father.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    paramAtoB: "我是A向B传值"
  }
})

<!-- 子组件B  wxml -->
<view class="inner">
  {{paramAtoB}}
</view>

//子组件B  js
Component({
  //B在这里接收与data类似可以直接在wxml上用
  properties: {
    paramAtoB: {
      type: String,//类型
      value: 'default value'//默认值
    }
  },
  data: {
    
  }
})

//子组件B json

{
  "component": true,
  "usingComponents": {}
}

效果

image.png

• 子传父

<!-- 父组件A wxml -->
<view>
  <componentB paramAtoB='{{paramAtoB}}' bind:myevent="onMyEvent"></componentB>
  {{ paramBtoA }}
</view>

// view/father/father.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    paramAtoB: "我是A向B传值",
    paramBtoA: 1122
  },
  onMyEvent: function (e) {
    //通过事件接收
    this.setData({
      paramBtoA: e.detail.paramBtoA
    })
  }
})

//父组件A json （里面不能有注释）

{
  "navigationBarTitleText": "父子传值",
  "usingComponents": {
    "componentB": "../../components/son/son"
  }
}

<!-- 子组件B  wxml -->
<view class="inner">
  {{paramAtoB}}
  <button bindtap='change'>向A中传入参数</button>
</view>

（注意：子组件的方法需要写在methods：{}里面）

//子组件B  js
Component({
  //B在这里接收与data类似可以直接在wxml上用
  properties: {
    paramAtoB: {
      type: String,//类型
      value: 'default value'//默认值
    }
  },
  data: {
    
  },
  methods: {
    //触发change事件向A传值
    change: function () {
      this.triggerEvent('myevent', { paramBtoA: "666传值成功" });
    }
  }
})

//子组件B json

{
  "component": true,
  "usingComponents": {}
}

原先效果

image.png

点击按钮之后

image.png