为了让 ChildComponent 既能从 ParentComponent 接收 active prop，又能在需要时对其进行更新，您可以在 ChildComponent 中结合使用 defineProps、defineEmits 和 emit 函数。

以下是实现方法：

在 ParentComponent 中：

enter code here

<template>
  <ChildComponent :active="active" @updateActive="updateActive" />
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      active: false, // Your initial value for active
    };
  },
  methods: {
    updateActive(value) {
      this.active = value; // Update the active value from the ChildComponent
    },
  },
};
</script>

在 ChildComponent 中：

<template>
  <div>
    <p>Active: {{ isActive }}</p>
    <button @click="toggleActive">Toggle Active</button>
  </div>
</template>

<script>
import { defineProps, defineEmits } from 'vue';

export default {
  props: {
    active: Boolean, // Declare the active prop
  },
  setup(props) {
    const isActive = ref(props.active); // Create a local ref for active

    // Emit an event to update active in the ParentComponent
    const emitUpdateActive = (value) => {
      emit('updateActive', value);
    };

    // Function to toggle the active state and emit the update
    const toggleActive = () => {
      isActive.value = !isActive.value;
      emitUpdateActive(isActive.value);
    };

    // Expose the isActive and toggleActive function to the template
    return {
      isActive,
      toggleActive,
    };
  },
  emits: ['updateActive'], // Declare the custom event
};
</script>

通过此设置，ChildComponent 可从 ParentComponent 接收 active prop，并且还能够在调用 toggleActive 函数时对其进行变异。updateActive 事件从 ChildComponent 发送到 ParentComponent，从而允许 ParentComponent 相应地更新其 active 值。