如何修改,子组件中来自父页面,传递进来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
