在Vue.js中实现ProfileCard背景颜色更新的技术问题

你的代码存在三个关键问题，导致颜色无法正常传递更新：

1. 颜色选择器未绑定初始值且事件参数错误 #

ColorPicker组件的<input>没有绑定value到传入的color props，导致初始颜色不显示；同时@change触发时传递的是事件对象而非颜色值，需要调整事件参数获取选中的颜色。

2. App.vue的updateColor方法未接收参数 #

updateColor方法里直接使用未定义的color变量，需要接收子组件传递的新颜色值。

修正后的ColorPicker.vue #

<script>
export default {
  props: ["color"],
  methods: {
    selectColor(newColor) {
      this.$emit('update-color', newColor)
    },
  },
};
</script>

<template>
  <div class="color__picker">
    <h2 class="color__picker--title">Card background colour:</h2>
    <!-- 绑定初始值并传递选中的颜色值 -->
    <input type="color" :value="color" @change="selectColor($event.target.value)" />
  </div>
</template>

修正后的App.vue #

<script>
import ProfileCardSlider from "./components/ProfileCardSlider.vue";
import ColorPicker from "./components/ColorPicker.vue";
export default {
  components: {
    ProfileCardSlider,
    ColorPicker,
  },
  data() {
    return {
      color: "red",
    };
  },
  methods: {
    // 接收子组件传递的新颜色值
    updateColor(newColor) {
      this.color = newColor;
    },
  },
};
</script>

<template>
  <ColorPicker :color="color" @select-color="updateColor" />
  <ProfileCardSlider :color="color" />
</template>

最后需要确保ProfileCardSlider组件将接收到的color props继续传递给ProfileCard组件，在ProfileCard中使用该值设置背景样式，示例如下：

<!-- ProfileCard.vue示例 -->
<template>
  <div class="profile-card" :style="{ backgroundColor: color }">
    <!-- 卡片内容 -->
  </div>
</template>

<script>
export default {
  props: ["color"]
}
</script>

内容的提问来源于stack exchange，提问作者AndyBeable