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

Question

I want to change only the color of the string in 'subMsg'. I don't want the color to affect the 'HomeContent' too.

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

I alocated a different string to the same subMsg in another component but in this component. I want the color to the different for only this subMsg component.

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

Is it possible to change the color?

Answer 1

you can do something like this:

parent component:

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

HomeContent component:

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