今天在使用Vue中遇到了一个新的需求:子组件需要修改由父组件传递过来的值,由于子组件的值是由父组件传递过来的,不能直接修改属性的值, 我们想改变传递过来的值只能通过自定义事件的形式修改父组件的值达到修改子组件值的目的。

在此处做个记录,防止以后踩坑!

子组件代码:

    childrenCallback(list){ 
//通过$emit调用父组件定义的on-change-Result方法,将需要改变的值传递到父组件
this.$emit('on-change-Result', $this.importResult) }

父组件代码:

 <el-form v-show="steps.active===2" :model="value" ref="safeinfo" :rules="rules" label-width="180px">
<safeproduction @on-change-Result="changeResultItems" :safeDatas="value.safeProductionItems" ref="safeproductiontable"></safeproduction>
</el-form>
methods:定义changeResultItems方法接收传递过来的值,然后赋值给父组件传过去的值达到更新子组件的值的目的
changeResultItems(val){
this.value.safeProductionItems=val;
console.log("子组件传过来的值",val)
}

对应关系:

Vue 子组件更新父组件的值的更多相关文章

  1. vue中子组件更新父组件

    当在子组件里更改了某些信息且关闭子组件后,需要父组件更新修改后的内容,该如何操作 1.$emit触发 父组件 @add="add(val)" 子组件 this.$emit('add ...

  2. vue中.sync修饰符,实现子组件实时更新父组件的值

    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定. 不过它有一个前身,先来看看.sync出现之前是如何实现的 父组件中(传递给子组件一个值:p ...

  3. vue子组件改变父组件的值

    1 在父组件的coment绑定事件 <template> <div :class="classObj" class="app-wrapper" ...

  4. vue 子组件调用父组件的方法

    vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...

  5. Vue 组件&组件之间的通信 之 子组件向父组件传值

    子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...

  6. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  7. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

  8. vue 父向子组件传递数据,子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  9. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

随机推荐

  1. RabbitMQ --- 直连交换机 【 无回调方法,不能获取消费结果 】

    1.前言 消息队列除了kafka 外,还有许多种,比如RabbitMQ .ActiveMQ.ZeroMQ.JMQ等. 老牌的ActiveMQ ,底层使用Java写的,资源消耗大,速度也慢,但是适合 J ...

  2. js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏

    /** * 页面滑动滚动事件 * @param e *///0为隐藏,1为显示var s = 1;function scrollFunc(e) { // e存在就用e不存在就用windon.event ...

  3. Go语言系列之反射

    变量的内在机制 Go语言中的变量是分为两部分的: 类型信息:预先定义好的元信息. 值信息:程序运行过程中可动态变化的. 反射介绍 反射是指在程序运行期对程序本身进行访问和修改的能力.程序在编译时,变量 ...

  4. Android官方文档翻译 二 1.Building Your First App

    Building Your First App 创建你的第一个App项目 Dependencies and prerequisites 依赖关系和先决条件 * Android SDK * ADT Pl ...

  5. 【pwn】DASCTF Sept 九月赛

    [pwn]DASCTF Sept 月赛 1.hehepwn 先查看保护,栈可执行,想到shellcode 这题需要注意shellcode的写法 拖入ida中分析 一直以为iso scanf不能栈溢出, ...

  6. wordcount报错:org.apache.hadoop.mapreduce.lib.input.InvalidInputException: Input path does not exist:

    Exception in thread "main" org.apache.hadoop.mapreduce.lib.input.InvalidInputException: In ...

  7. 【解决了一个小问题】go.mod文件中引用另一个库,总会自动拉取新版本

    我的项目依赖某个旧的公共库: require ( git.xxx.com/myprj/mylib v0.0.43 ) 可以编译的时候,系统总会自动加上这样的路径: require ( git.xxx. ...

  8. Cesium源码剖析---视频投影

    Cesium中的视频投影是指将视频作为一种物体材质,实现在物体上播放视频的效果.这个功能在Cesium早期版本中就支持了,在Code Example中有一个示例.今天就来分析一下其内部实现原理. 1. ...

  9. java类的反射机制

    1.获得一个类的类对象有哪些方式? - 方法1:类型.class,例如:String.class- 方法2:对象.getClass(),例如:"hello".getClass()- ...

  10. Activity Fragment Service生命周期图

    service的生命周期,从它被创建开始,到它被销毁为止,可以有两条不同的路径: A started service 被开启的service通过其他组件调用 startService()被创建. 这种 ...