Question

我只想更改'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"
  }
}
}

是否可以更改颜色？

Answer 1

您可以执行以下操作：

父组件：

//HTML part
<HomeContent :subMsg="{color:subMsgColor,message:'* Required'}"/>
// script part
data() {
  return {
    subMsgColor: "red"
  }

HomeContent组件：

<template>
  <div class="hello">
    <div class="card">
      <div class="card-content">
        <h1>{{ msg }}</h1>
        <p :style="{color:subMsg.color}">{{ subMsg.message }}</p>
      </div>
    </div>
  </div>
</template>

  <script>
    export default {
      name: "hello",
      data() {
        return {
          msg: "Data Collection"
        };
      },
      props: {
        subMsg: {
           type:Object,
           default:null
         }
      }
    } 
   </script>

如何更改其他组件中道具的颜色

1 个答案: