Vue项目中使用props传递数据并允许子组件修改的方案

小鱼儿 2022-10-12 01:07 282阅读 0赞

在项目中遇到了一个相关需求：

一个页面中为了能够使代码更加简洁和易于查看，将其分成了多个功能模块。此时多个功能模块都需要使用共同的一组数据进行展现或对其进行修改。此时考虑到Vue项目中的数据通信方式：  
![在这里插入图片描述][20210702103134791.png]  
可能还是使用上述的 方式1 + 方式2 是最易于理解和简单的。使用方式1传递数据给子组件，如果子组件需要对其进行修改，使用方式2。

但是使用props通信的时候，最关键的问题就是子组件虽然能够接收到父组件传递过来的数据，但是无法对其进行修改。如果修改会出现下面的报错信息：  
![在这里插入图片描述][20210702103641456.png]  
此时通过参考资料，总结出了下面的解决方案：

亟需解决的问题：父组件存储一组数据，在需要时传递给其它功能子组件去展现或修改。针对需要修改这组数据的子组件，使用下面的方式解决上述报错问题。

<handle-box :options="groupOptFormat" v-bind.sync="params" @search="onSearch" @reset="onReset" ></handle-box>

如上述代码，handle-box为子组件。其中：

（1）使用 `:` 传递的为最传统的props方式，在子组件中使用props接收即可。

（2）使用 `v-bind.sync` 的为这次解决问题的方案。

（3）使用 `@` 即可传递事件，是传统的vue自定义事件方式。

此时在子组件中，使用props来接收，包括使用（2）方式传递的数据。

props: { 
        options: Array,
        groupId: String
      },

params在这里传递的本身是个对象，但是在上述props接收时，可以直接接收其中的数据。

params: { 
            groupId: ''
          },

在子组件接收之后，为了能够对数据进行修改，使用以下方案：

<el-select :value="groupId" placeholder="请选择用户组ID" clearable @input="e=>$emit('update:groupId',e)" >
            <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value" >
            </el-option>
          </el-select>

使用 `:value` 和 `@input` 对其进行处理即可。

`@input` 会在数据发生变化时触发，对该数据进行变更，并且不会出现报错信息。

（该代码中，$emit的内容不需要父组件传递 或者 自己编写，Vue内置）

[20210702103134791.png]: /images/20221005/dd9273b7d50943d5b97b31fdd7007965.png
[20210702103641456.png]: /images/20221005/8da21bc2e2f84f94b7395e0789aa9210.png