首页 > Web开发 > JavaScript教程 > 正文

微信小程序组件传值图示过程详解

互联网 2019-09-09 23:30:01 0

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": {}}

效果

子传父

<!-- 父组件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": {}}

原先效果

点击按钮之后

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持web开发者。

  • 相关标签:
  • 版权归原作者所有,如果有侵犯到您的权益,请联系本站删除!
  • 相关文章


    • 暂无相关信息

    专题推荐

    今日头条
  • 手机哪款好?8月值得买的手机就这四款 手机哪款好?8月值得买的手机就这四款
  • 七夕保命技能书送上 女朋友还有30秒到达战场 七夕保命技能书送上 女朋友还有30秒到达战场
  • 七夕保命技能书送上 女朋友还有30秒到达战场 七夕保命技能书送上 女朋友还有30秒到达战场
  • 七夕搞笑句子大全2019 七夕微信说说笑死人那种 七夕搞笑句子大全2019 七夕微信说说笑死人那种
  • 热门标签