Transferencia de valor entre componentes personalizados del mini programa

El componente principal pasa valor al componente secundario

Método: enlace de datos WXML

1. Componente principal: vincula directamente los datos del componente principal al componente secundario

//father.js

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

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

2. Subcomponente: Reciba los datos del componente principal en propiedades

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

El componente secundario pasa valor al componente principal

Método: evento personalizado

acontecimiento desencadenante

Cuando un componente personalizado desencadena un evento, debe utilizar el método triggerEvent para especificar el nombre del evento, el objeto de detalle y las opciones del evento:

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

Las opciones de triggerEvent para desencadenar eventos incluyen:

nombre de la opción	tipo	¿Es necesario?	valor por defecto	describir
burbujas	Booleano	No	FALSO	Si el evento surge
compuesto	Booleano	No	FALSO	Si el evento puede cruzar el límite del componente. Si es falso, el evento solo se activará en el árbol de nodos que hace referencia al componente y no ingresará a ningún otro componente.
fase de captura	Booleano	No	FALSO	Si el evento tiene una fase de captura

Código de muestra

1. Vincular eventos personalizados al componente secundario en el wxml del componente principal

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

2. Activa este evento en el js del subcomponente.

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

3. Reciba los datos pasados ​​en la función de evento dentro del componente principal js.

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