A是父组件，B是子组件

• 父传子

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

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

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

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

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

//子组件B  jsComponent({  //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.jsPage({  /**   * 页面的初始数据   */  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  jsComponent({  //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

gzh.jpg

每日分享前端技术知识，致力于帮助更多前端人翻过一座座山，踏过一个个坑。

原著是一个有趣的人,若有侵权,请通知删除