小程序父子组件通信

父组件向子组件传递数据

• 在父组件的文件夹中的.json文件下引入子组件

{
  "usingComponents": {
  	//"Tab" 是自己定义的组件名称
  	//"../../components/Tab/Tab" 是组件的路径
    "Tab":"../../components/Tab/Tab"
  }
}

• 在父组件里以标签的形式写入子组件
  • 如果需要传值的话，在标签上自定义属性名，属性值要以双花括号保住

<Tab tabs="{{tabs}}" data-index={{index}}></Tab>

• 子组件是通过properties来获取父组件传递的数据，接着子组件把这个数据当成是data中的数据使用即可

Component({
  ///组件的属性列表
  properties: {
    tabs:{
      type:Array, //要接收的数据类型
      value:[] //默认值（可选）
    }
  }
})

子组件向父组件传递数据

• 通过this.triggerEvent()用于子组件向父组件发射事件和参数

<button size="mini" bind:tap="handleTap">+1</button>

methods: {
    handleTap(){
      //三个参数：方法名称，子组件要往父组件传递的参数
      this.triggerEvent("increment",{index:0})
    }
  }

• 父组件页面中使用bind监听子组件发射过来的事件：

<Tab tabs="{{tabs}}" bindincrement="handleIncrement"></Tab>

• 父组件方法使用：

handleIncrement(e){
	//子组件向父组件传递过来的参数都储存在事件对象e中
    const index = e.detail.index
    this.setData({
      count:this.data.count + index
    })
}

小程序父子组件通信

原文：https://www.cnblogs.com/jincanyu/p/14349236.html