小程序自定义组件间的传值

父组件向子组件传值

方式：WXML 数据绑定

1.父组件：直接绑定父组件的数据到子组件上

//father.js

page({
	demoData:'父组件向子组件传的数据',
})

//father.wxml，
<son  fatherData='{
   
   {demoData}}' ></son>

2.子组件：在properties内接收父组件的数据

//son.js
//properties为组件的对外属性，是属性名到属性设置的映射表
//this.data.fatherData,或this.properties.fatherData的方式都可以访问到properties内的值
Component({
	properties: {
   		fatherData:{
      	type:String
    	}
  	},
  	//将父组件传递的数据在生命周期内打印出来
	attached: function () {
    	// 在组件实例进入页面节点树时执行
    	console.log('父组件传过来的数据：'+this.data.fatherData) //父组件向子组件传的数据
  	},
})

子组件向父组件传值

方式：自定义事件

触发事件

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

	var myEventDetail = {} // detail对象，提供给事件监听函数(要传给父组件的数据)
    var myEventOption = {} // 触发事件的选项
    this.triggerEvent('myevent', myEventDetail, myEventOption)

triggerEvent触发事件的选项包括:

选项名	类型	是否必填	默认值	描述
bubbles	Boolean	否	false	事件是否冒泡
composed	Boolean	否	false	事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进 入其他任何组件内部
capturePhase	Boolean	否	false	事件是否拥有捕获阶段

示例代码

1.父组件的wxml中给子组件绑定自定义事件

//father.wxml
//在子组件上绑定自定义事件
<son bind:sendsondata='getfatherdata'></son>

2.子组件的js内触发这个事件

//son.js
//子组件触发自定义事件，并将组件内的数据传出去
this.triggerEvent('sendsondata', '子组件内的数据', )

3.在父组件js内的事件函数中接收传递的数据

//father.js
methods:{
	getfatherdata(res){
		console.log('子组件传过来的数据:'+res.detial)
	}
}