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

A是父组件，B是子组件

父传子

！-父组件a wxml-view组件b paramAtoB=' { { paramAtoB } } '/组件b/view//父组件Ajson(里面不能有注释)

{ ' navigationBarTitleText ' : '父子传值，'使用组件' : { '组件B': '././组件/子/子' }}//父组件a js///view/父/父。jsPage({ /** *页面的初始数据*/data: { paramAtoB: '我是A向B传值' }})!-子组件b wxml-view class=' inner " { paramAtoB } }/view//子组件B jsComponent({ //B在这里接收与数据类似可以直接在页面结构上用属性： { paramato b : { type : String，//类型值： '默认值'//默认值} }，data: { }})//子组件数据

{"组件":为真，"使用组件": {}}效果

子传父

！-父组件a wxml-view组件b paramAtoB=' { { paramAtoB } } ' bind : my event=' onymyevent '/组件b { { paramAtoB } }/view///view/父/父。jsPage({ /** *页面的初始数据*/data: { paramAtoB: '我是A向B传值，paramBtoA: 1122 }，onMyEvent:函数(e) { //通过事件接收这个。setdata({ param btoa : e . detail。parambtoa })})//父组件一个json(里面不能有注释)

{ ' navigationBarTitleText ' : '父子传值，'使用组件' : { '组件B': '././components/son/son' }}！-子组件B wxml - view class='内部{paramAtoB}}按钮bindtap=“更改”向A中传入参数/按钮/视图（注意：子组件的方法需要写在方法：{}里面)

//子组件B jsComponent({ //B在这里接收与数据类似可以直接在页面结构上用属性： { paramato b : { type : String，//类型值： '默认值'//默认值} }，data: { }，methods: { //触发变化事件向A传值变更：函数(){ this.triggerEvent('myevent '，{ paramBtoA: '666传值成功' });} }})//子组件数据

{"组件":为真，"使用组件": {}}原先效果

点击按钮之后

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