我只想更改“ 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"
}
}
}
可以改变颜色吗？
您可以执行以下操作：
父组件：
//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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句