微信小程序组件通信
Posted zdping
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序组件通信相关的知识,希望对你有一定的参考价值。
当我们撸前端页面的时候,当发现一个页面内容很多、且有一定的分类,就应当考虑是否需要将页面拆分成一个个组件。当使用组件的时候,不可避免的需要知道父子页面通信以及兄弟页面的通信。
1、父向子通信 是通过properity去传递即可。properity是组件对外属性,有三个属性:type(必须)、value、observer。
父组件:
<view>*********我是父组件********</view> <view>父组件的文字</view> <view>这是childB文本输入框传的值{{paramB}}</view> <view>*****我是子组件A*******</view> <childA dataChildA=‘{{gotoChildA}}‘/>
子组件:先在properity定义传递的参数,然后就可以直接在wxml中获得这个参数
properties: {
dataChildA:String
},
<view>我是childA的内容</view> <view>{{dataChildA}}</view>
2、子向父通信 可以通过triggerEvent进行传递参数
子组件:
<view>我是childB的内容</view> <input type=‘text‘ bind:change=‘getData‘ placeholder=‘请填写信息‘/>
getData(e){ console.log(e) let detail=e.detail.value let value={val:detail} //必须传递参数是对象 this.triggerEvent(‘myevent‘,value)//myevent需要与父组件的事件保持一致 }
父组件:
<view>*****我是子组件B*******</view> <childB bind:myevent="onMyEvent"/>
onMyEvent(e){ console.log(e) this.setData({ paramB:e.detail.val }) },
tips:triggerEvent有三个参数(事件,要传递的对象,触发事件的选项)
以上是关于微信小程序组件通信的主要内容,如果未能解决你的问题,请参考以下文章