如何在vue js中修改父组件的颜色属性

<template>
  <div>
    <ChildComponent :color="color"></ChildComponent>
    <button @click="changeColor">修改颜色</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      color: 'red'
    };
  },
  methods: {
    changeColor() {
      this.color = 'blue'; // 修改颜色属性
    }
  }
};
</script>

<template>
  <div :style="{ color: color }">
    子组件的颜色为{{ color }}
  </div>
</template>

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

<template>
  <div>
    <ChildComponent @change-color="changeColor"></ChildComponent>
    <button @click="changeColor">修改颜色</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      color: 'red'
    };
  },
  methods: {
    changeColor() {
      this.color = 'blue'; // 修改颜色属性
    }
  }
};
</script>

<template>
  <div>
    <button @click="changeColor">修改父组件颜色</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeColor() {
      this.$emit('change-color'); // 触发change-color事件
    }
  }
};
</script>