首页 > 技术文章 > 子组件向父组件通信与父组件向子组件通信

lvlisn 2021-05-28 15:16 原文

 

父组件内 wx.ml

<popup_window isAlert="{{isAlert}}" bind:changwindow="handleTap"></popup_window>

子组件内wx.ml

<!-- 弹出框 -->
<view class="cover" wx:if="{{isAlert}}">
    <view class="alert">
        <input type="number" bindinput="getNumber" placeholder="请输入新的学号" class="at_input" />
        <view class="buttom">
            <button class="al_btn" bindtap="giveupAlert">取消</button>
            <button class="ar_btn" bindtap="modifyNumber">确定</button>
        </view>
    </view>
</view>

 

 

父组件向子组件传递属性通信  子组件在.js中接受属性

<popup_window   isAlert="{{isAlert}}"  ></popup_window>

子组件内通过properties内部接受属性

 properties: {
    // 开启弹窗
    isAlert:{
      type:Boolean,//接受类型
      value:false//默认值
    }
  },

 

 

子组件向父组件通信

父组件内部

<popup_window  bind:changwindow="handleTap"></popup_window>

父组件内部定义方法handleTap

//接受子组件传递过来的数据
  handleTap(e){
    let isAlert=e.detail; //子组件传递过来的属性
    this.setData({
      isAlert
    })
  },

 

子组件内部 通过随便绑定一个方法  触发该方法是通过this.triggerEvent('父组件传递的属性(这里是changewindow)',  value(要传递的值))

giveupAlert: function () {
    this.triggerEvent("changwindow",false)
  },

 

 

推荐阅读