【JS/Vue3】关于Vue引用透传

问问题是学习最好的方式

html 复制代码
// 父组件 SceneModel
<InfoPanel :pannel="toolInfo" />


// 子组件 SceneInfoPanel
<div class="grid-item" v-for="(item, index) in props.pannel.content" :key="index">
<div class="grid-item-title">{{ t(item.title) }}</div>
<template v-if="item.editable">
  <el-input
    class="editable-item"
    :input-style="inputStyle"
    size="small"
    v-model="item.value"
    :placeholder="item.placeholder || ''"
  ></el-input>
</template>
<div v-else class="grid-item-value">{{ item.value == 0 ? 0 : item.value || '--' }}</div>
</div>

子组件这里el-input修改props.pannel.content之后是如何保存的呢?

props不是不允许修改吗?

父组件又是如何接收得呢?

1. el-input 修改 props.pannel.content 是如何保存的?props 不是不允许修改吗?

现象

在 SceneInfoPanel.vue 里这样用:

vue 复制代码
<el-input
  class="editable-item"
  :input-style="inputStyle"
  size="small"
  v-model="item.value"
  :placeholder="item.placeholder || ''"
/>

这里 item 来自 props.pannel.content,而 props 理论上是只读的。

实际原因

  • Vue 的"只读"是针对 props 对象本身 ,即你不能直接赋值 props.pannel = xxx
  • 但如果 props.pannel 里传的是一个对象或数组(引用类型),你可以修改它的属性 (如 props.pannel.content[0].value = ...),Vue 不会阻止。
  • 这种"间接修改"其实是反模式 ,但 Vue3 没有严格禁止(Vue2 的 propsData 也一样)。

所以:

  • 你通过 v-model="item.value" 实际上是直接改了 props.pannel.content 里的数据。
  • 只要父组件传进来的 pannel 是响应式的(如 reactiveref),父组件也能感知到这些变化。

2. SceneModel 又是如何接收到的?

在 SceneModel.vue 里:

vue 复制代码
<InfoPanel :pannel="toolInfo" />
  • toolInforeactive 的对象,包含 content 等属性。
  • 你在 SceneInfoPanel 里通过 v-model="item.value" 改变了 toolInfo.content 的内容。
  • 因为 toolInfo 是响应式的,SceneModel 里可以直接读取到最新的内容(如 toolInfo.content),数据是同步的

总结

  • 没有直接赋值 props,只是修改了 props 里的对象属性,Vue 没有阻止。
  • 父组件传递的对象是响应式的,子组件的修改会同步到父组件。
  • 这种写法虽然常见,但更推荐用事件/emit通知父组件修改数据,以避免维护上的混乱。

推荐写法(更规范)

  • 子组件用 emit('update:value', newValue) 通知父组件修改数据。
  • 父组件用 v-model:value="xxx" 实现真正的单向数据流。

现在的写法能用,属于 Vue 的"引用透传"特性,建议后续优化为事件驱动的数据流。

相关推荐
paopaokaka_luck2 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9492 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_2 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路5 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔5 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang5 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔5 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任6 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴6 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔6 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js