文章目录
- 一. 业务场景描述
- 二. 原因分析
- 三.解决方案
- 3.1 方案一 原生标签（不建议）
- 3.2 方案二 父子传递（不建议）
- 3.3 方案三 vuex，pinia 状态传值（不建议）
- 3.4 方案四 vue初始化属性 （建议）
看过相关的很多内容，大部分集中在说需要添加$forceUpdate.而我根本不行。具体业务场景详见下文
一. 业务场景描述
在我所在的业务场景中。我嵌套了多层匿名子组件，用来展示某条数据的不同业务
如上图在基本情况简介中有数个属性表单。
我如下遍历
<el-table
v-loading="loading"
:data="xunchaDataList"
@expand-change="expandRow"
@selection-change="handleSelectionChange">
<el-table-column type="expand">
<template #default="props">
.............
<el-tab-pane label="基本情况简介" name="introduction">
<template v-if="props.row.countryType === '村社区'">
............
<div v-if="String(props.row.country_introducts[item.key]).length <= 15">
<el-input
:readonly="isOnlyRead"
:placeholder="props.row.country_introducts[item.key]"
v-model="props.row.country_introducts[item.key]"/>
</div>
</template>
<template v-else> 暂无数据</template>
</el-tab-pane>
</template>
</el-table-column>
</el-table>
上述内容中经测试，数据回显异常，程序不报错，无法显示输入变化，但是数据可以被正常修改。
二. 原因分析
v-model="props.row.country_introducts[item.key]" 这里存在多个问题：
- vue规范中子组件不能直接被修改，保证了单向数据流，避免了数据的混乱与不可预测性。 但经测试是可以修改，但是无法回显罢了。建议不要这样做。
- vue无法监听动态属性，country_introducts[item.key]是不可预测的，没有在vue初始化时和vue绑定，vue无法感知动态新增的属性变化。
三.解决方案
3.1 方案一 原生标签（不建议）
使用原生input等。他的机制和el-input略有不同。但也不建议。因为v-model="props.row.country_introducts[item.key]"仍然破坏了vue的单向数据流原则。
3.2 方案二 父子传递（不建议）
使用父子传递，通知父组件强制刷新。 但我的业务中可以发现，进行了多层匿名子组件嵌套。递交任务十分麻烦。
3.3 方案三 vuex，pinia 状态传值（不建议）
虽然可以通过这种方式让父子数据交互，但可以发现，子组件的v-model接收对象，和props.row的交互逻辑异常麻烦。
3.4 方案四 vue初始化属性 （建议）
业务中原本使用动态方式，
由于orginParams初始化为 originParams:{}.造成originParams被赋值时，属性均为动态型。
解决方案就是按照prop.row包含的属性。将originParams初始化。
