微信小程序父子通讯、传值 triggerEvent[亲测有效]

大家好，欢迎来到IT知识分享网。

一、父组件给子组件传值

分三步
1父组件定义变量；
2父组件传递变量；
3子组件接收变量；

一、定义、传递变量

Page({ 
   
  data: { 
   
    tabsList:[
      { 
    id:1, name:'一一', isActive:true, },
      { 
    id:2, name:'二二', isActive:false, },
      { 
    id:3, name:'三三', isActive:false, },
      { 
    id:4, name:'四四', isActive:false, }
    ]
  },
})
// 传递变量
<Tabs tabsList="{ 
   {tabsList}}"></Tabs>

IT知识分享网

三、子组件接收、使用变量

IT知识分享网Component({ 
   
  properties: { 
    // properties 接受一个 Object 类型的参数。
    tabsList:{ 
   
      type:Array,
      value:[],
    }
  },
})
// 使用变量
<view wx:for="{ 
   {tabsList}}" wx:key="id" >
  { 
   { 
   item.name}}
</view>

properties 定义 微信文档传送

二、子组件向父组件传值 triggerEvent

• 重点在于父组件传递给子组件的方法名称要加上
  【bind父组件提供的方法名称】
• 子组件调用时 需要 this.triggerEvent(’【父组件提供的方法名称】’,参数)

this.triggerEvent(‘myevent’, myEventDetail, myEventOption)

一、父组件定义函数方法A

Page({ 
   
  data: { 
   },
  // 定义函数方法
  fn1(e){ 
   
    const { 
    active, } = e.detail;
  }
})
// 父组件传递 注意**
<Tabs bindFn2="fn1"></Tabs>

三、子组件调用、并传入参数

IT知识分享网<button bindtap="tabclick">点击传参</button>
// 子组件调用自己的方法
Component({ 
   
  methods: { 
   
    tabclick(){ 
   
      const active = { 
   }; // 参数 
      this.triggerEvent('Fn2',{ 
    active, }) // 传入参数
    }
  }
})