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

微信(小程序)  /  管理员 发布于 5年前   491

A是父组件，B是子组件

父传子

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

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

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

 {{paramAtoB}}

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

//子组件B json

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

效果

子传父

  {{ paramBtoA }}

// 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" }}

 {{paramAtoB}} 向A中传入参数

（注意：子组件的方法需要写在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": {}}

原先效果

点击按钮之后

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

您可能感兴趣的文章:

• 微信小程序引入Vant组件库过程解析
• 微信小程序3种位置API的使用方法详解
• 微信小程序 高德地图路线规划实现过程详解
• 微信小程序中悬浮窗功能的实现代码
• 微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
• 微信小程序如何引用外部js，外部样式，公共页面模板
• 更优雅的微信小程序骨架屏实现详解