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

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

一个页面中为了能够使代码更加简洁和易于查看，将其分成了多个功能模块。此时多个功能模块都需要使用共同的一组数据进行展现或对其进行修改。此时考虑到Vue项目中的数据通信方式：

可能还是使用上述的方式1 + 方式2 是最易于理解和简单的。使用方式1传递数据给子组件，如果子组件需要对其进行修改，使用方式2。

但是使用props通信的时候，最关键的问题就是子组件虽然能够接收到父组件传递过来的数据，但是无法对其进行修改。如果修改会出现下面的报错信息：

此时通过参考资料，总结出了下面的解决方案：

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

    <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-optionv-for="item in options":key="item.value":label="item.value":value="item.value"></el-option></el-select>

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

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

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

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

props传递对象_vue组件中使用props传递数据的实例详解
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法组件不仅仅是 ...
【Vue】Props传递数据(父传子) 自定义事件(子传父)
文章目录一.定义一个父组件和一个子组件(子组件嵌套在父组件中) 二.Props传递数据(父传子) 1.使用Props数组方式传值 2.对象方式传值三.自定义事件(子传父) 一.定义一个父组件和一个 ...
Vue项目中v-for无法渲染数据
在Vue项目中,我们想要实现下面的布局效果后端返回的数据格式如下,可以看出产品列表五张图的数据位于同一个数组中而我的html结构如下: 我希望直接渲染左边一张大图,然后右边的四张小图通过v-for ...
vue项目中使用mock模拟数据
一.先在vue项目中安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save ...
在Vue项目中使用echarts完成迁徙图（Map组件）
在Vue项目中使用echarts完成迁徙图此章个人理解:参考原有的代码基础上,完成了一个地图迁徙的组件先了解一下整体代码, 有能力的可以参照整体完成, 下面也会列出详细步骤解答代码我放在了gith ...
Vue项目中前端请求后端数据的两种方式
1.JS方式,使用fetch函数,较底层 //JS方式请求分页数据 fetch("http://localhost:9090/user/page?pageNum=" +this.p ...
VUE项目中如何实现表格数据的懒加载
vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1.分页处理如果不想分页 ...
vue项目中使用神策进行数据埋点
前言: 在vue种使用神策进行数据埋点一.数据埋点的意义: 所谓埋点就是在应用中特定的流程收集一些信息,用来跟踪应用使用的状况,后续用来进一步优化产品或是提供运营的数据支撑,包括访问数(Visits ...
Vue项目中你是如何解决跨域的呢？
Vue项目中你是如何解决跨域的呢? 一.跨域是什么跨域本质是浏览器基于同源策略的一种安全手段同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能所谓同源( ...

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

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

最新文章

热门文章