微信小程序父子组件之间的通信
2019-11-25 本文已影响0人
郝艳峰Vip
前沿
小程序是之前开发的了,之前一直忙,现在有点小空总结一下,方便以后,忘记了还可以翻翻笔记。看完自几在写几遍你就会发现跟vue的大同小异。
一,父组件传给子组件
父组件写法:
这是通过viewText="{{viewText}}"传向子组件。
<MyToast viewText="{{viewText}}" bind:myEvent="OnViewText"></MyToast>
子组件写法
子组件是通过properties
来获取:
properties:{
viewText:{ //属性名
type:Number, //类型,必填项 目前接受的类型有:String,Number,Boolean,Object,Arrray,null(表示任意类型)
value:'' //属性初始值(可选)如果未制定,会根据类型选择一个。
}
}
接下来就是在methods:方法里边的自定义函数中来取值就好了
methods:{
//这里是随便一个方法名字
getnumber:function(){
console.log(this.data.viewText); //这样就可以取道父组件传过来的值了
}
}
二,子组件传给父组件
子组件写法
//这里的input是子组件中的某个输入框
<input type="number" bindinput="getInputnumber" value="{{codes}}"></input>
methods:{
//这里是bindinput的方法名
getInputnumber:function(e){
this.triggerEvent('myEvent',e.detail.value) //这里的myEvent是自己自定义的事件名字,需要父组件中通过他来接受,
}
}
父组件写法
这里我还引用上边父组件的名字,也就是说子组件在触发这个方法后需要在父组件中手动获取就好了。
<MyToast viewText="{{viewText}}" bind:myEvent="OnViewText"></MyToast>
//这里的myEvent是子组件传递过来的自定义事件名称,OnViewText这个是父组件中自定义的事件名称
methods:{
OnViewText:function(e){
//这立的这个e就是子组件传过来的值
this.setData({
code:e
})
}
}