如何仅更改来自另一个组件的道具的颜色

【问题标题】：How do I change the color of only the props from another component如何仅更改来自另一个组件的道具的颜色
【发布时间】：2020-10-18 08:22:33
【问题描述】：

我只想更改“subMsg”中字符串的颜色。我不希望颜色也影响“HomeContent”。

<template>
  <div class="submit">
      <HomeContent v-bind:style="{ color: color }" subMsg="* Required"/>
       <div id="buttons">  
        <button type="button" class="btn btn-light"><router-link to="/about">Back</router-link></button>
        <button type="button" class="btn btn-primary" id="submit"><a href="#">Submit</a></button>
      </div>
  </div>
</template>

我在另一个组件中为同一个 subMsg 分配了一个不同的字符串，但在这个组件中。我只希望这个 subMsg 组件的颜色不同。

import HomeContent from "@/components/HomeContent.vue";
export default {
 name: "Submit",
  components: {
    HomeContent
  },
  data() {
  return {
    color: "red"
  }
}
}

可以换颜色吗？

【问题讨论】：

• 您（可能）必须在 <HomeContent /> 内部执行此操作
• 我已经为另一个组件中的相同 'subMsg' 提供了另一个字符串。在 中更改它也会影响那个。

  ```
• 您将道具发送到 HomeContent。如果您可以共享要更改颜色的其他组件的代码，那将很有帮助
• @user9879287 我要更改的组件在我在问题中发布的代码中。 <HomeComponent /> will affect that one too. <div class="home"> <HomeContent subMsg = "This is a pillar measure." /> </div> 此代码是一个不同的组件，我使用相同的道具“subMsg”来显示与问题中找到的不同的消息。我想更改此代码中“subMsg”的颜色 ===> <div class="submit"> <HomeContent v-bind:style="{ color: color }" subMsg="* Required"/></div> 如问题所示。
• @Alberta，你能分享 HomeContent 组件中的代码吗