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

  

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

一、直接把对象当成参数传给子组件,(看上去更简单,经测试发现一个问题,因为新增时要置空对象的所有信息,甚至包括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. Delphi TScrollBar 用于滚动窗口、组件内容

    滚动条组件(TScrollBar)此组件是一个Windows滚动条,用于滚动窗口.组件内容.许多控制有滚动条属性,它们把滚动条作为自己的一部分,对于没有完整滚动条的控制,TScrollBar组件提供了 ...

  2. HDU 2236 无题II(二分图匹配+二分)

    HDU 2236 无题II 题目链接 思路:行列仅仅能一个,想到二分图,然后二分区间长度,枚举下限.就能求出哪些边是能用的,然后建图跑二分图,假设最大匹配等于n就是符合的 代码: #include & ...

  3. JSP自己定义标签继承哪个类

    JSP自己定义标签继承哪个类 解:JSP自己定义标签继承TagSupport

  4. 使用match、test控制输入字符格式后键盘向左向右键光标自动定位解决

    直接举例说明(正则表达式替换红色区域即可) /** * 判断是否位数字 * @param obj 数字 */ function numOnly(obj) { if(!(/^\d*$/.test(obj ...

  5. Android gdb so

    gdb debug an android application 1.gdb 要有gdbserver 一般模拟器默认装有gdbserver,如2.3.3的模拟器,看一下有没有: D:\Develope ...

  6. 在jquery的ajax方法中的success中使用return要注意的问题

    jquery的ajax方法:在success中使用return:来结束程序的时候,结束的只是success这个方法,也就是说success中的return的作用范围只是success: 如果要想在su ...

  7. cubietruck制作刷新lubuntu-kernel

    一:安装交叉编译工具链以及相应的工具(系统最好是ubutnu-64位-server) sudo apt-get install g++ sudo apt-get install libncurses5 ...

  8. 说说设计模式~单件模式(Singleton)

    单件模式(Singleton)要求一个类有且仅有一个实例,并且提供了一个全局的访问点. 从概念上来研究一下它的实现,不考虑线程安全 1 public sealed class Singlton 2 { ...

  9. LINQ to SQL 语句(1)之 Where

    LINQ to SQL 语句(1)之 Where Where 操作 适用场景:实现过滤,查询等功能. 说明:与 SQL 命令中的 Where 作用相似,都是起到范围限定也就是过滤作用的 ,而判断条 件 ...

  10. poi 处理excel 小数问题 整数不保留小数位 整数多.0

    读取的单元格为 hssfCell ,传入下面我提供的方法处理默认poi返回的为DOUBLE,所有先转为Long判断下,再进行返回: private String getValue(Cell hssfC ...