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

Question

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

徽标组件

<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>

和最后一个 LANDING COMPONENT

<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 脚本中的样式。

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

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

Answer 1

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

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

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

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

但是 codepen 会非常方便

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

use same component with same props name in on page not works vuecli

javascript

vue.js

vuetify.js

vue-cli