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

  

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

一、直接把对象当成参数传给子组件,(看上去更简单,经测试发现一个问题,因为新增时要置空对象的所有信息,甚至包括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. PS 抠图如何使用通道法处理头发

      通道抠图法抠出美女飘逸头发-PS抠图实例教程 抠图更换背景后效果图 通道抠图法抠出美女飘逸头发-PS抠图实例教程 教程步骤: 1  打开原图,进入通道面板. 通道抠图法抠出美女飘逸头发-PS抠图实 ...

  2. TCP三次握手与DDOS攻击原理

    TCP三次握手与DDOS攻击原理 作者:冰盾防火墙 网站:www.bingdun.com 日期:2014-12-09   在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接. ...

  3. 辛星深入分析vim的自己主动补全功能以及vim的映射

    曾经对于vim的自己主动补全功能,都是须要的时候从网上下载点配置项,然后复制到自己的vimrc上去,自己也不知道是什么意思.结果发现搜索到的非常多自己主动补全的方式都非常另类,有的喜欢在补全大括号的时 ...

  4. python(24)- 面向对象进阶

    面向对象基础知识: 1.面向对象是一种编程方式,此编程方式的实现是基于对类和对象的使用: 2.类是一个模板,模板中包装了多个‘函数’供使用(可以将多函数中公用的变量封装到对象中): 3.对象,根据模板 ...

  5. PJSIP 调用的GUID库

    PJSIP库产生随机序列串用到GUID库,针对不同的平台使用的方式不同:Windows平台下使用的是Windows系统API CoCreateGuid,在方法 pj_generate_unique_s ...

  6. VS中 build,rebuild,clean

    一般来说Rebuild=99%*(Clean+Build),效果在非常小的可能性下会不同,一般可以忽略. Rebuild是对Solution下的所有项目,逐个进行 Clean+Build.不论文件更改 ...

  7. Day1 [上]- 认识Python

    python简单介绍: python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为AB ...

  8. 压力测试工具ab,wrk,locust简介

    ab 无疑是目前最常见的压力测试工具.其典型用法如下: shell> ab -k -c 100 -t 10 http://domain/path 其中,参数「c」表示的是并发, 参数「t」表示的 ...

  9. UNIX网络编程卷1 时间获取程序client TCP 使用非堵塞connect

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 1.当在一个非堵塞的 TCP 套接字(可使用 fcntl 把套接字变成非堵塞的)上调用 co ...

  10. spring2实现定时任务的一种方式

    1. 在项目中放入Spring的jar包 2. applicationContext.xml的<beans xmlns>部分,添加context相关内容: <beans xmlns= ...