Vue中同一个页面引入相同组件，传值出现的问题

Love The Way You Lie 2023-02-21 11:52 63阅读 0赞

问题：

界面默认只能显示第2个组件的值。

![20200630142740355.png][]

代码：

//template中页面插入子组件
    
    <span class="dataStatistics-title">车总数:</span>
    <DigitRoll class="digitRoll" :rollDigits="totalNumber"></DigitRoll>
    
    <span class="dataStatistics-title1">今天总数:</span>
    <DigitRoll class="digitRoll1" :rollDigits="digits"></DigitRoll>
    
    
    //script中引入组件
    
    import DigitRoll from "@huoyu/vue-digitroll";
    export default {
      components: { DigitRoll }
    }

问题分析：

在同一层次的节点中，diff算法需要key去区分不同的节点。

如果需要在同一页面复用组件，需要格外注意组件内部属性复用的问题，最安全的办法就是给不同的组件都绑定key属性，让Vue能区分开它们，这样不仅仅能提高diff算法的效率，而且保证了不会发生冲突。

<span class="dataStatistics-title">车总数:</span>
    <DigitRoll class="digitRoll" :rollDigits.sync="totalNumber" key="totalNumber"></DigitRoll>
    
    <span class="dataStatistics-title1">今天总数:</span>
    <DigitRoll class="digitRoll1" :rollDigits="digits" key="digits"></DigitRoll>

添加完之后我们依然没办法解决那个问题

之后我们通过v-if来控制一下DigitRoll组件展示的条件

<span class="dataStatistics-title">车总数:</span>
    <DigitRoll class="digitRoll" :rollDigits.sync="totalNumber" key="totalNumber" v-if="access && notConnected"></DigitRoll>
    <span class="dataStatistics-title1">今天总数:</span>
    <DigitRoll class="digitRoll1" :rollDigits="digits" key="digits" v-if="digits"></DigitRoll>

这里的access ,notConnected,digits 是通过后端接口返回的，需要判断是否存在这个值时才渲染该组件。

[20200630142740355.png]: https://img-blog.csdnimg.cn/20200630142740355.png

发表评论取消回复

表情：

评论列表（有 0 条评论，63人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE中父子组件之间传值

VUE 中父组件向子组件传值直接贴代码了，这里是片段代码，仔细看并尝试写一下应该是没有问题的。父组件： <template> <div>

灰太狼/ 2023年07月09日 13:29/ 0 赞/ 122 阅读

相关 vue中组件传值方法的总结

一、vue中组件传值在`vue`中，组件传值有很多方法，父组件给子组件传值、子组件给父组件传值，非父子组件传值、`Vuex`等等。在这里，以父组件给子组件传值、子组件给父组

女爷i/ 2023年06月25日 06:15/ 0 赞/ 86 阅读

相关 Vue中同一个页面引入相同组件，传值出现的问题

问题：界面默认只能显示第2个组件的值。 ![20200630142740355.png][] 代码： //template中页面插入子组件

Love The Way You Lie/ 2023年02月21日 11:52/ 0 赞/ 64 阅读

相关 Vue - 组件传值（父子组件间传值、非父子组件间传值）

推荐：[Vue汇总][Vue] Vue - 组件传值（父子组件间传值、非父子组件间传值）如果你对组件不太了解，推荐你先阅读它：[Vue - Vue组件基础][Vue

我就是我/ 2022年12月21日 11:00/ 0 赞/ 462 阅读

相关一个父页面多次使用同一个组件，子组件如何传值？

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMy

谁借莪１个温暖的怀抱￠/ 2022年11月05日 06:29/ 0 赞/ 264 阅读

相关 vue中组件之间传值

![父子之间传值][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

不念不忘少年蓝@/ 2022年02月15日 11:41/ 0 赞/ 409 阅读

相关 Vue父子组件传值

Vue父子组件传值：有四种方式：props，ref，emit 和模板传递通信slot 通过props来传值：静态传值就是直接通过props来传递动态传值是通

Dear 丶/ 2022年01月22日 15:15/ 0 赞/ 494 阅读

相关【Vue】组件传值

本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_

Bertha 。/ 2021年11月05日 13:30/ 0 赞/ 481 阅读

相关 vue 兄弟组件传值

在vue开发中总会遇到组件传值问题，今天总结一下兄弟组件之间的传值方法。 1、子传父，父传子 2、vuex 3、eventBus 接下来介绍如何使用eventBus实现

た入场券/ 2021年09月04日 06:55/ 0 赞/ 514 阅读

相关 vue的组件间传值

父组件向子组件传值 1.父组件中引入子组件，直接使用v-bind在子组件标签上传值 <template> <div> <hom

系统管理员/ 2021年09月02日 05:12/ 0 赞/ 529 阅读