在頁面上使用具有相同道具名稱的相同組件不起作用 vuecli

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真的很方便