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 值

相关推荐
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem2 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术2 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理2 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing2 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
袁煦丞3 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作