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 值

相关推荐
Mintopia4 分钟前
3D Quickhull 算法:用可见性与冲突图搭建空间凸壳
前端·javascript·计算机图形学
白日依山尽yy4 分钟前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
Mintopia5 分钟前
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼
前端·javascript·three.js
陌小路10 分钟前
5天 Vibe Coding 出一个在线音乐分享空间应用是什么体验
前端·aigc·vibecoding
成长ing1213818 分钟前
cocos creator 3.x shader 流光
前端·cocos creator
Alo36526 分钟前
antd 组件部分API使用方法
前端
BillKu29 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
GDAL32 分钟前
Object.freeze() 深度解析:不可变性的实现与实战指南
javascript·freeze
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
这里有鱼汤1 小时前
首个支持A股的AI多智能体金融系统,来了
前端·python