微信小程序兄弟组件之间的传值

微信小程序子父组件之间的传值不难,看文档就行了
该文章主要讲兄弟组件之间如何传值
其实兄弟组件之间的传值,也是通过触发父级方法,父级方法里setData设置传入另一个组件的值,从而修改另一个子组件的值(似乎有点绕,没事,看看一下代码)

app.json声明两个组件

"usingComponents": {
  "component-test": "pages/component/test/test",
  "component-testcom2": "pages/component/testcom2/testcom2"
}

component-test组件的js

properties: {
  testValue:{
    type:String,//属性名
    value:"默认值"//属性初始值
  }
}

component-test组件的wxml

{{testValue}}

component-testcom2组件的js

methods: {
  test2method() {
    //触发父级(index.js里的)test2method方法
    this.triggerEvent('test2method', {
      passValue: "组件之间传的值"
    })
  }
}

component-testcom2组件的wxml


父级页面index.wxml



父级js index.js

data:{
   testValue:""
},
...
test2method:function (e) {
  //接收component-testcom2传进来的值,再设置给testValue
  //component-test内部就会自动修改值
  this.setData({ testValue: e.detail.passValue })
},

你可能感兴趣的:(小程序)