首页 > 课堂 > 小程序 > 正文

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

2020-03-21 15:50:17
字体:
来源:转载
供稿:网友

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

原先效果

微信小程序,组件,传值

点击按钮之后

微信小程序,组件,传值

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表