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

最新推荐文章于 2025-05-23 09:16:05 发布

KenThomas

最新推荐文章于 2025-05-23 09:16:05 发布

阅读量8.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：微信小程序组件

本文链接：https://blog.youkuaiyun.com/KenThomas/article/details/89090391

小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍微信小程序中实现兄弟组件间数据传递的方法。通过触发父组件方法并更新数据，进而改变兄弟组件的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序子父组件之间的传值不难，看文档就行了
该文章主要讲兄弟组件之间如何传值
其实兄弟组件之间的传值，也是通过触发父级方法，父级方法里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

<text>{{testValue}}</text>

component-testcom2组件的js

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

component-testcom2组件的wxml

<button bindtap='test2method'>组件之间传值</button>

父级页面index.wxml

<component-test testValue="{{testValue}}"></component-test>
<component-testcom2 bind:test2method="test2method"></component-testcom2>

父级js index.js

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