Vue3子组件emit无法更新父组件v-model绑定的数组prop问题

该问题的核心原因是：你在子组件生成toggleAction时直接修改了props.toggles原数组的引用，emit传回父组件的值和父组件原有值内存地址完全一致。
Vue的v-model语法糖本质是:propName="绑定值" + @update:propName="val => 绑定值 = val"的简写，当赋值操作左右两边是同一个引用类型值时，Vue响应式系统会判定值未发生变化，直接跳过更新触发流程。
你观察到的“更新积压、其他非数组prop更新时才同步数组值”现象，本质是其他prop的emit触发了组件重渲染，此时你之前直接修改原数组产生的变更才被渲染出来，并不是更新真的被缓存了。第一次emit能生效只是因为初始值首次赋值的触发逻辑和后续更新逻辑判定规则不同，属于偶发现象。

核心原则：所有通过emit向父组件传递的数组/对象类型值，必须是全新引用的拷贝值，禁止直接修改props中的原有引用类型值再回传。

推荐方案：修改子组件逻辑，生成新数组再emit #

调整子组件toggleButton中的业务逻辑，所有数组操作都基于原数组的浅拷贝执行，不要直接操作props.toggles：

const toggleButton = () => {
  // 先对原数组做浅拷贝，生成全新内存地址的数组
  const toggleAction = [...props.toggles]
  // 以下是你的业务逻辑，所有增删改都操作新数组
  const targetIdx = toggleAction.indexOf(/* 你的操作值 */)
  if (targetIdx > -1) {
    toggleAction.splice(targetIdx, 1)
  } else {
    toggleAction.push(/* 你的操作值 */)
  }
  // 回传新数组引用，Vue可正常检测到变更
  emit('update:toggles', toggleAction)
}

该方案同时符合Vue单向数据流规范，不会出现隐式修改父组件状态的问题，不管父组件用ref还是reactive存值都能正常生效。

兜底方案：父组件接收更新时主动生成新引用 #

如果子组件逻辑不方便修改，可以放弃v-model简写，手动绑定props和更新事件，在接收值时主动做浅拷贝：

<template>
  <div id="cms-custom-editor" class="cms-custom-editor">
    <cms-editor-toolbar 
      :toggles="state.toggles"
      @update:toggles="val => state.toggles = [...val]"
    />
    <div class="content">Toggle Buttons: {{ state.toggles }}</div>
  </div>
</template>

<script setup>
import CmsEditorToolbar from './cms-editor-toolbar.vue'
import { reactive } from "vue";

const state = reactive({
    toggles: [],
})
</script>

• 严格遵循Vue单向数据流要求，禁止直接修改props中定义的数组、对象等引用类型值，否则会出现难以排查的状态不一致问题
• 回传对象类型值时，和数组逻辑一致，需要用{...原对象}做浅拷贝生成新引用后再emit，复杂嵌套对象可以用JSON.parse(JSON.stringify(原对象))做深拷贝
• 不要依赖直接修改props引用类型值触发视图更新，该行为不在Vue的官方设计预期内，不同版本下表现可能不一致

内容的提问来源于stack exchange，提问作者Artur Müller Romanov