vue3子组件获取并修改父组件的值

在子组件中,父组件传递来的 prop 是只读的,但是确实有修改的需求,故此做个小小研究

复制代码
// 父组件使用模版:@update:xxx="dialogVisible = $event"
// 子组件使用模版
// const emits = defineEmits(['update:xxx']);
// emits('update:xxx',false)


// 父组件
// :dialogVisible="dialogVisible"  向子组件传值(查询用)
// @update:dialogVisible="dialogVisible = $event" 向子组件传值(可修改)
<HelloWorld
    :dialogVisible="dialogVisible" 
    @update:dialogVisible="dialogVisible = $event"
></HelloWorld>

const dialogVisible = ref(false)

// 子组件
// 接收父组件的数据和方法
const parentData = defineProps(['dialogVisible']);
// 接收父组件需要修改的值
const emits = defineEmits(['update:dialogVisible']);

const onReset = ()=>{
  // 子组件执行修改父组件值
  emits('update:dialogVisible',false)
  console.log('emits','修改成功');

  console.log('parentData.dialogVisible 1',parentData.dialogVisible); // true

  nextTick(()=>{
  	console.log('parentData.dialogVisible 2',parentData.dialogVisible); // false
  })
    
  setTimeout(()=>{
    console.log('parentData.dialogVisible 2',parentData.dialogVisible); // false
  },0)
}

小现象

在子组件修改 dialogVisible 值后立即从父组件再获取并打印时发现值并未立即修改

为什么会打印旧值?

  1. emit 是同步的:事件触发是同步操作

  2. 状态更新是同步的:在父组件的事件处理函数中,状态赋值是同步的

  3. prop 传递是异步的:Vue 的响应式系统更新和重新渲染是异步的

  4. 组件更新顺序

    • 子组件触发 emit

    • 父组件同步更新自己的状态

    • 父组件状态更新后,需要重新渲染才能将新值传递给子组件

    • 在子组件的 emit 方法后立即打印,此时父组件尚未完成重新渲染

执行流程详解

  1. 子组件调用 emits('update:dialogVisible', false)

  2. 父组件的 @update:dialogVisible 处理函数执行

  3. 父组件同步更新 dialogVisible = false

  4. 此时在父组件处理函数中打印 dialogVisible 会显示 false

  5. 但在子组件中,props.dialogVisible 不会立即更新

  6. Vue 开始异步更新过程(下一个 tick)

  7. 父组件重新渲染,将新值传递给子组件

  8. 子组件接收到新的 prop 值

相关推荐
qczg_wxg4 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz5 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码6 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v6 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山6 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin6 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip6 小时前
结合Worker通知应用更新
前端·javascript
叶玳言7 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳7 小时前
HTML 基本结构
前端
Gazer_S7 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js