微信小程序传参思路

微信小程序传参

1.微信小程序组件传参之 父传子

父组件WXML

// 父组件像子组件传参的作用是让子组件显示父组件的某些数据
//例如：自定义组价 ipt 
//当用户输入错误或者没输入就想提交时，我就必须向他传送某些信息如：必填选项
//父页面的WXML
<ipt remained="错误信息为：介是个必填选项" bind:blur="isBlur"></ipt>
//remainded里面是我想传送过去的值,bind:blur里面的Blur是子组件传递过来的触发事件名字，isBlur是当我触发了整个blur时，父组件接受参数的函数

父组件JS

// 
Page({
  data: {
    msg:""
  },
  //子组件的触发函数
  isBlur(e){
	//此时的e为子组件穿过来的值
	console.log("让老衲看看这小子传个啥")
	}
})

2.子页面

子页面的js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
  //这个propertie就是所有父组件出传递过来的数据了
 		remained:String
 		//这个对象的意思是 我需要父组件传递给我remained这个字段，然后这个字段的值我需要是字符串类型的
 		
  },
  //这里是子页面的函数区域
  methods:{
  //当input发生失去焦点的时候，我就要执行change
		change(e){
			console.log(e)
			let value = e.detail.value
			//这里的部分就是向父组件传递事件和值的地方了
			this.triggerEven('blur',value)
			
		}
	}

 
})

子页面的WXML

// 这里就是当我input输入框失去焦点的时候 我来触发change 然后在父元素那里触发 isBlur 
<input bindblur="change"></input>
//这里就是remained就是父元素传过来的值了
<text>{{remained}}</text>

总计一下

1. 父元素向子元素传递只需要 在子组件中添加一个键值对 例如： 

// 父页面
<子组件 msg="我想要传过去啊啊啊啊"><子组件>
//其中 msg 是需要穿过来的键名 ，值是后面的"我想要传过去啊啊啊啊"

2.在子组件中只需要在properties中添加这

// 子组件页面
properties:{
	msg:String
	//其中msg 是键名（和父元素一样）,String 是我需要的类型
	//如果不写类型会报错
}

 2.子元素向父元素传值呢？

1.向父元素传值必须子组件触发事件

// 父页面WXML
<子组件  bind:aaa="isChange"></子组件>
//其中的aaa是子组件传递过来的函数名，这个是子组件定义的，
//isChange是父组件随便定义的

// 父页面JS
isChange(e){
	里面的e就是子组件穿过来的值
}

2.到了子组件了

// 子组件的WXML ，用input是因为input是最常见的子传父
<input bindblur="isBlur"></input>
//当我失去焦点时，我要触发isBlur

// 子组件的JS
methods:{
//这个事件触发我就会向父页面传递一个函数和一个值
	isBlur(e){
		this.triggerEven('aaa',e.detail.value)
		//其中aaa是我的自定义事件，负责在父页面触发，事件后面的是我想传过去的值
	}
}