组件间数据通信等问题
发布于 5 年前 作者 qiangxia 18386 次浏览 来自 问答

在开发中，一些公共的功能可以单独抽出来作为一个组件，比如下面这样：

我这边每个页面在远程获取数据渲染页面之前都有一个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);
};

这样效率很低，频繁更新数据的话，测试时会提示“该小程序导致微信变慢而终止”所以父子组件间的通信有什么好的解决方案么？

3 回复

我并不是微信小程序的工程师。

我只是也在制作微信小程序。

我们也碰到了您所述的问题，目前要保持一个data的状态，就需要将这个data的对象保存下来下次刷新数据的时候一次性再穿进去。不然就会数据丢失。

@nivk，您是微信小程序的工程师吧？

目前您使用的方式是最佳的。唯一需要注意的是刷新频率和数据量方面是否可优化一下？

回到顶部