组件间数据通信等问题
在开发中,一些公共的功能可以单独抽出来作为一个组件,比如下面这样: 我这边每个页面在远程获取数据渲染页面之前都有一个loading过渡状态, 因此就把该功能单独抽出来作为一个组件, wxss,wxml,js每一次使用的时候都需要单独的import wxss我嫌烦,就直接放到app.wxss内了, [代码]<[代码][代码]template[代码] [代码]name[代码][代码]=[代码][代码]"loader"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"container com-loader {{loadingHide}}"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"loading"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"loader-bd"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"notext"[代码][代码]>没有更多啦</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"spinner"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]text[代码] [代码]class[代码][代码]=[代码][代码]"bounce bounce1"[代码][代码]></[代码][代码]text[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]text[代码] [代码]class[代码][代码]=[代码][代码]"bounce bounce2"[代码][代码]></[代码][代码]text[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]text[代码] [代码]class[代码][代码]=[代码][代码]"bounce bounce3"[代码][代码]></[代码][代码]text[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]</[代码][代码]template[代码][代码]>[代码][代码]let hide = [代码][代码]'hide'[代码][代码];[代码][代码]let animationName = [代码][代码]'sn-fade-in'[代码][代码];[代码][代码]const defaultData = {[代码][代码] [代码][代码]loadingHide: [代码][代码]''[代码][代码],[代码][代码] [代码][代码]animationName: [代码][代码]''[代码][代码]}[代码][代码]export [代码][代码]default[代码] [代码]{[代码][代码] [代码][代码]data: defaultData,[代码][代码] [代码][代码]hidePageLoader() {[代码][代码] [代码][代码]this[代码][代码].setData({ loadingHide: hide, animationName: animationName })[代码][代码] [代码][代码]},[代码][代码] [代码][代码]showPageLoader() {[代码][代码] [代码][代码]this[代码][代码].setData(defaultData)[代码][代码] [代码][代码]}[代码][代码]}[代码]如果我需要在主页面内操作组件的data和方法,目前是将二者合并为一个对象 [代码]import pageLoader from [代码][代码]'../../components/loader/index'[代码][代码]import deepAssign from [代码][代码]'../../vendors/deep-assign'[代码] [代码]Page(deepAssign(mePage, pageLoader))[代码]这样,如果组件比较多的话,对象合并肯定很耗内存,请问还有其他比较好的实现方式么? 另外,数据的变更,组件间数据的更新,也有问题。
比如,我定义一个属性 [代码]data:{person:{name:[代码][代码]'aaa'[代码][代码],age:10}}[代码]用setData的方式 [代码]this[代码][代码].setData({person:{name:[代码][代码]'phillyx'[代码][代码]}})[代码]person对象属性就直接覆盖了,age就没用了
我这边也是通过deepAsssign强制刷新,没有单独的做脏数据检查 [代码]export const setData = (obj) => {[代码][代码] [代码][代码]var[代码] [代码]page = _getCurrentPage();[代码][代码] [代码][代码]let o = deepAssign(page.data, obj);[代码][代码] [代码][代码]page.setData(o);[代码][代码]};[代码]这样效率很低,频繁更新数据的话,测试时会提示“该小程序导致微信变慢而终止”
所以父子组件间的通信有什么好的解决方案么?