如何在子组件中修改父组件传递的active Prop？

在Vue的单向数据流规则中，子组件不能直接修改父组件传递的props，要实现子组件更新active状态，得通过子组件触发自定义事件，父组件响应事件并更新状态的方式来完成，具体步骤如下：

1. 子组件定义触发事件 #

在子组件里，先定义用于通知父组件更新active的自定义事件（推荐用update:active这种符合Vue规范的命名，后续可结合语法糖简化写法）：

const props = defineProps(['active']);
// 定义触发事件
const emit = defineEmits(['update:active']);

// 子组件内部需要修改active时，调用emit触发事件
const changeActive = () => {
  // 这里可以根据需求传入新的状态值，示例是取反
  emit('update:active', !props.active);
};

2. 父组件绑定并响应事件 #

父组件有两种写法来接收子组件的事件通知：

写法一：显式监听事件 #

直接监听子组件的update:active事件，拿到新值后更新自身的active状态：

<ChildComponent :active="active" @update:active="active = $event" />

写法二：使用v-model语法糖（更简洁） #

如果子组件的prop名为active，且触发的事件是update:active，可以直接用v-model的绑定语法简化代码：

<ChildComponent v-model:active="active" />

3. 子组件内部状态使用优化（可选） #

如果子组件内部需要频繁操作这个状态，可以给computed添加setter，这样修改时直接给computed变量赋值即可自动触发emit：

const props = defineProps(['active']);
const emit = defineEmits(['update:active']);

const isActive = computed({
  get() {
    return props.active;
  },
  set(newVal) {
    emit('update:active', newVal);
  }
});

// 子组件内部修改时直接赋值
// isActive.value = !isActive.value;

这种方式既遵循了Vue的单向数据流规则，又实现了父子组件的状态双向同步——父组件修改active会同步到子组件，子组件也能通过触发事件让父组件更新状态。

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