在页面上使用具有相同道具名称的相同组件不起作用 vue cli

Question

嗯。我有一个名为 Logo 的组件，我几乎在每个视图甚至其他组件中都使用它。徽标组件只需要 1 个道具：“大小”，我使用 javascript 来让它响应取决于它的字体大小，但是 => 例如我有一个着陆： 在着陆时，我在着陆时渲染了组件：导航栏，其中包含他内部的“徽标组件”。同时我也在登陆视图中使用了 logo 组件：

标志组件

<template lang="html">
    <div class="logoCon">
        <a class="logo">Some name for Logo</a>
    </div>
</template>
<script>
export default{
    props: ['size'],
    name: 'Logo',
    methods: {
        logoSizing(size){
            // java script code for make the sizing right.
        }
    },
    created(){
        // calling logoSizing function.
        this.logoSizing(this.size);

        // for adding the font size.
        document.querySelector(".logo").style.fontSize = (this.size + "px");
    }
}
</script>

导航栏组件

<template lang="html">
    <div class="navbarCon">
       //some code for navbar. and inside the navbar we have logo component:
       <logo :size="logoSize" />
    </div>
</template>
<script>
export default{
    name: 'Navbar',
    data: () => ({
      logoSize: "20"
    })
}
</script>

最后一个着陆组件

<template lang="html">
    <div class="navbarCon">
       // navbar component
       <navbar />

       // we have logo component:
       <logo :size="logoSize" />
    </div>
</template>
<script>
export default{ 
    name: 'Landing',
    data: () => ({
      logoSize: "400"
    }),
    components: {
      navbar,
      logo
    }
}
</script>

---

所以现在如果我运行代码，“logoSize”变量不会以单独的方式对每个都起作用，并且只获得一个徽标组件，主要是导航栏和登陆时的徽标组件，它从我的 java 中完全没有样式脚本。

=>如何在一个页面中多次使用徽标组件并以不同的方式为每个组件工作

这个问题不仅仅针对我的 LOGO 组件我所有的组件都有同样的问题请帮我解决它....我想哭

Answer 1

所以考虑到您的 logoSizing(size) 不会改变大小值（因为您不会改变道具，因为当您这样做时，您也会在父组件中更改它并且可能导致不一致的更改），我会说也许您的组件正在以相同的 id 呈现（这听起来有点奇怪）。

为了解决这个“问题”，（除非你以某种方式强迫它，否则这不应该发生）给组件不同的键就像

<logo :size="400" :key="navbarLogo"/>
<logo :size="300" :key="appbarLogo"/>

这会强制您的组件在 DOM 中具有不同的 ID。

但是codepen真的很方便