有一个父组件页面如上,点击新增或者修改都会弹出同一个子组件如下:

  

父组件传参到子组件有两种方式:

一、直接把对象当成参数传给子组件,(看上去更简单,经测试发现一个问题,因为新增时要置空对象的所有信息,甚至包括ID,所有弹出子组件的时候对象信息是展示正确的,但是原来的列表页面,点击的某条数据就是丢失,需要再次刷新或者再次发送请求方可正常);

二、正确的方法应该是父组件传一个ID给子组件也就是弹出框,然后在vue实例被生成后调用这个函数(created)里面通过后端的接口获取对象的详细信息,这样就会避免父组件数据的丢失。

js 父组件向子组件传参的更多相关文章

  1. Layui父页面向子页面传参

    废话不多说!直接上代码! 父窗体js $('.mytable').on('click', '.editRow', function () { var table = $('#table_id_exam ...

  2. 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作

    父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  3. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

  4. react学习-react父组件给子组件传值与设置传值类型以及是否必传参数

    react 父组件给子组件传参时,父组件直接在引入的子组件内写入要传递的参数即可 <HeaderComponent title={"传递的参数"}></Heade ...

  5. vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

    Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...

  6. Vue 父组件向子组件传值,传方法,传父组件整体

    父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...

  7. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

  8. VUe.js 父组件向子组件中传值及方法

    父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...

  9. vue父组件为子组件传值传不过去?vue为数组传值,不能直接用等于的方式,要用循环加push的方式

    父组件为子组件传值不成功,子组件拿不到值,不能直接赋值,要用循环加push的方式赋值.

  10. vue学习之父组件与子组件之间的交互

    1.父组件数据传给子组件 父组件中的msgfather定义数据 在之组件中通过设置props来取得希望从父组件中获得的值 通过设置这两个属性就可以从父组件传数据到子组件 2.子组件传数据给父组件(这里 ...

随机推荐

  1. poj 1651 Multiplication Puzzle【区间DP】

    题目链接:http://poj.org/problem? id=1651 题意:初使ans=0,每次消去一个值,位置在pos(pos!=1 && pos !=n) 同一时候ans+=a ...

  2. js 数组的迭代

    es5新增加的迭代方法(every,filter,forEach,map,some) arr1 = [1,2,3,4,5,6]; 1,every(); every() 方法使用指定函数检测数组中的所有 ...

  3. VueJS表达式支持:逻辑控制或运算

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  4. MySQL提示Access denied for user &#39;&#39;@&#39;localhost&#39;”的解决

    记得那时由于没有网络,把rootpassword改错了写成了: update user set password="122" where user="root" ...

  5. Unsupported major.minor version (jdk版本错误)解决方案 办法

    如果你遇到了 Unsupported major.minor version ,请认真看一下,说不定会有帮助. 我花两个小时总结的经验,你可能10分钟就得到了. ^**^ 一.错误现象: 当改变了jd ...

  6. php接收post过来的 json数据 例子

    html代码 <html> <head> <title>json</title> <script src="//cdn.bootcss. ...

  7. Android------Intent.createChooser

    Intent的匹配过程中有三个步骤,包含Action , category与data 的匹配. 假设匹配出了多个结果.系统会显示一个dialog让用户来选    择.例如以下图: 那么今天我们主要是解 ...

  8. vs2010中添加dll文件

    1.更改设置 1.1   project->properties->configuration properties->C/C++->General->Addtional ...

  9. 在Fedora25上轻松安装Cuda8

    http://blog.csdn.net/u010158659/article/details/53592891 Cuda 8对于Pacal架构的英伟达新一代显卡(GTX 1070/1080/Tita ...

  10. Clustering of residential areas based on residential conditions

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuZ3hpYW5neXVpYm0=/font/5a6L5L2T/fontsize/400/fill/I0 ...