【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 的"引用透传"特性,建议后续优化为事件驱动的数据流。

相关推荐
万少16 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL22 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0238 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang39 分钟前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼42 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿43 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00001 小时前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试