码迷,mamicode.com
首页 > 微信 > 详细

微信小程序组件通信(一)

时间:2019-01-04 23:34:55      阅读:676      评论:0      收藏:0      [点我收藏+]

标签:参数   很多   a*   bin   定义   输入   内容   选项   直接   

  当我们撸前端页面的时候,当发现一个页面内容很多、且有一定的分类,就应当考虑是否需要将页面拆分成一个个组件。当使用组件的时候,不可避免的需要知道父子页面通信以及兄弟页面的通信。

  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有三个参数(事件,要传递的对象,触发事件的选项)

 

微信小程序组件通信(一)

标签:参数   很多   a*   bin   定义   输入   内容   选项   直接   

原文地址:https://www.cnblogs.com/zdping/p/10222965.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!