问答

[vue]一个组件挂载多次,数据相互影响问题!

作者:admin 2021-08-16 我要评论

同一个组件挂载多次后数据会串。 因为怀疑是在组件注入state造成问题,我把state数据通过props传入问题还是存在: RatePanel v-bind="..." / 下面是问题组件的大...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

同一个组件挂载多次后数据会串。
因为怀疑是在组件注入state造成问题,我把state数据通过props传入问题还是存在:<RatePanel v-bind="..." />

下面是问题组件的大概情况

// 页面
<div v-for="item in boxList" :key="item.id">
    <RatePanel v-bind="item" />
</div>
// RatePanel 组件
<SpotBox
    v-if="productType === 'SPOT'"
    :key="id"
    v-bind="$props"
    v-on="$listeners"
/>
<FwdBox
    v-if="productType === 'FWD'"
    :key="id"
    v-bind="$props"
    v-on="$listeners"
/>

export default {
    name: 'RatePanel',
    props: {
        id: String,
        productType: String
    }
}
// SpotBox、FwdBox 组件
<a-row v-for="(item, index) in pricelist" :key="index">
    {{ item.price }}
</a-row>

export default {
    name: 'SpotBox', //name: 'FwdBox',
    props: {
        id: String,
    },
    computed: {
        ...mapState('spotModule', [
            'spotMessage',
        ]),
    },
    watch: {
        'spotMessage': {
            handler(message) {
                if (message.panelId === this.id) {
                    this.pricelist = message//一些筛选....
                }
            }
        }
    }
}

组件bug展示:
截屏2020-05-13 16.53.12.png
(左边的正确数字应该位30.xxxx,右边正确数字应该为1.xxxx)

###
</template>
    // 问题出在这,这里声明的变量在组件挂载多次的时候是共享的!!!!!
    const tenorKeyMap = new Map();
<script>
    export default {
        watch: {
            ...
            tenorKeyMap.set(KEY, DATA)
            ...
        }
    }

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • [vue]一个组件挂载多次,数据相互影响

    [vue]一个组件挂载多次,数据相互影响

  • screen/docker 里的字体颜色变样?

    screen/docker 里的字体颜色变样?

  • javascript正则表达式

    javascript正则表达式

  • 同样的sql只换了一个条件的值,导致sql

    同样的sql只换了一个条件的值,导致sql

腾讯云代理商
海外云服务器