用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序子组件修改properties问题

Rolan 2020-7-22 00:32

如何修改,子组件中来自父页面,传递进来properties数据问题? 在日常开发中,相信经常会有很多人遇到要自己手动封装一个弹窗的时候,这个弹窗需要由父组件来控制显示,也就是从父组件传递一个变量 isHidden 进子组件,子 ...

如何修改,子组件中来自父页面,传递进来properties数据问题?

在日常开发中,相信经常会有很多人遇到要自己手动封装一个弹窗的时候,这个弹窗需要由父组件来控制显示,也就是从父组件传递一个变量 isHidden 进子组件,子组件在 properties 中接受,
注意: 子组件的properties 一般都是单项数据流,子组件不能,修改来来自父组件的数据,

这样就有个问题了,有时候,当你想在子组件中 控制自身弹窗 的 显示隐藏 就没办法做到了,只能靠子组件向父组件通讯,利用时间triggerEvent来通知父组件修改 isHidden ,这样就很麻烦了, 冗余了很多函数;

没办法做到自身关闭自身

那么如何不用子父通讯来达到效果呢?
请看代码:

//  父组件
page({
 data:{
       iShidden:false  //传递给 子组件
  }
}})
------------------------------------------------------
// 子组件
Component({
  properties: {
    iShidden: {
      type: Boolean,
      value: true, //true 就隐藏 false 就显示
    }
  },
  methods:{
      //当点击关闭时
      onTap:function(){
       // 获取页面总栈
        let pages = getCurrentPages();
         //currPage 就是当前的页面,这样就获取到了当前页面的实例   
        let currPage  = pages[pages.length - 1];  //    [  page.length-1 ]是当前页,  [pages.length - 2]上一页, 以此类推
       // 接下来就是骚操作的时候了
          currPage.setData({ iShidden:true});
         // 拿到页面实例,就意味着,你可以在当前页面操作其他页面的数据, 调用函数等....
      }
  }
})

是不是觉得很骚呢?
有了这个方法,你甚至可以颠覆 以往 vue,小程序 中的 子父组件通讯的规则;
可以通过 currPage 页面实例,将子组件中的值, 给设置到任意其他页面去, 再也不用通过 triggerEvent去传了

的确是很骚的一个操作, 不过像这种邪门歪道偶尔用用就好啦, 为啥?

从一开始, 各类框架,各类状态库,就强调了, 单向数据源的理念, vuex的统一数据源,有mutation , ,都是有一个单向数据流理念在, 如果没有单向数据,任何地方的修改,都会让你的数据不稳定,你不知道何时会被修改,导致各种 问题 bug,

所以尽量减少使用这样的方法setData

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 双笙_ 来自: 简书