微信小程序传参
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是我的自定义事件,负责在父页面触发,事件后面的是我想传过去的值
}
}