微信小程序父子组件之间的通信

6,741

前沿


小程序是之前开发的了,之前一直忙,现在有点小空总结一下,方便以后,忘记了还可以翻翻笔记。看完自几在写几遍你就会发现跟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
   })
}
}

到此就结束了,希望看到的小伙伴觉得还有不足的地方,多多发言!共同进步!