微信小程序父子通讯、传值 triggerEvent

一、父组件给子组件传值

分三步
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>

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

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

properties 定义 微信文档传送

定义段	类型	是否必填	描述 最低版本
type		是	属性的类型
optionalTypes	Array	否	属性的类型（可以指定多个）
value		否	属性的初始值
observer	Function	否	属性值变化时的回调函数

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

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

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

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

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

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

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