wepy中父子组件之间传值时与vue中的一些区别

最新推荐文章于 2025-06-02 15:37:02 发布

徐飞不会喝酒

最新推荐文章于 2025-06-02 15:37:02 发布

阅读量203

点赞数

分类专栏：不积跬步无以至千里文章标签： vue.js javascript 微信小程序前端

本文链接：https://blog.youkuaiyun.com/weixin_61243175/article/details/124693491

版权

不积跬步无以至千里专栏收录该内容

12 篇文章

订阅专栏

这篇博客详细介绍了在Wepy框架中，父组件如何通过.sync修饰符传递变量`tipsShow`给子组件，并且子组件如何通过.user修饰符触发父组件的方法`tipsClose`和`tocontact`，涉及组件间的通信机制及页面跳转逻辑。示例代码展示了父子组件的模板、脚本部分，包括事件绑定和数据处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：wepy父组件中

传变量 ::tipsShow.sync="tipsShow"（需要加.sync）

接受方法：@goNext.user="tipsClose"（需要加.user）

<template>   
<TipsPopup :tipsShow.sync="tipsShow" @goNext.user="tipsClose" @tocontact.user="tocontact" />
</template>
 
<script>
import TipsPopup from "./../../components/TipsPopup";

export default class DataSts extends wepy.component {
    usingComponents: {
      "van-popup": "../../components/lib/popup/index",
    },
    components = { TipsPopup };

 
  data = {
       tipsShow: false, // 会员冻结的提示
}
 
  methods = {
    tocontact(e){
      this.tipsShow = e
      this.$apply();
    },
    tipsClose(e){ 
      this.tipsShow = e
      if(this.ischecked == true){
        wx.navigateTo({
          url: "/pages/my/editInfo"
        });
      }else{
        wx.navigateTo({
          url: "/pages/my/myFamilyShare"
        });
      }
      this.ischecked = false
      this.$apply();
    },
  }
}
</script>

子组件

<template>
  <view>
    <van-popup custom-style="width:584rpx;height:400rpx;background-color:#fff;" show="{{ tipsShow }}" close-on-click-overlay="false">
    <view class="TipsPopup">
      <view class="tips_title">亲爱的会员用户</view>
      <view class="tips_content"><text>由于您的账号出现异常，为了保证您的卡券安全，目前已被冻结。请联系门店前台或拨打客服为您重新恢复会员权益。客服热线：400-155-6606</text></view>
      <view class="btn_con">
        <button class="contact" @tap="tocontact" open-type="contact">联系客服</button>
        <button class="Confirm" @tap="goNext">我知道了</button>
      </view>
    </view>
    </van-popup>
  </view>
</template>

<script>
    import wepy from 'wepy'
    export default class RateBar extends wepy.component {
    config = {
      usingComponents: {
        "van-popup": "./components/lib/popup/index",
      }
    };
    props = {
      tipsShow: {
        type: Boolean,
        default: false
      },
    };

    data = {     
    };

    methods = {
      goNext(){
        this.tipsShow = false
        this.$emit("goNext",this.tipsShow);
        this.$apply()
      },
      tocontact(){
        this.tipsShow = false
        this.$emit("tocontact",this.tipsShow);
        this.$apply()
      }
    }
    }
</script>