（代码在最后）

1、父组件给子组件传值直接通过props,听着很简单，但是对于初学者来说还是比较难以理解的，今天小白通过自己的实践操作结合代码分析一下

案例  把模态框单独的抽离出来，当作一个组件

第一步：首先写好一个模态框 （我直接用的是element-ui中的dialog弹出框） 当作子组件

第二步：在父组件中引入  引入的时候注意一下自己的路径就可以了，这两步应该很容易吧，很容易理解的

第三步：在父组件中使用components注入这个组件

第四步：在父组件中直接使用就可以啦 ，说着容易，但是没实际做过的，还是比较难以理解的

第五步：在父组件data数据中，定义一个dialogFormVIsible ：false  这个用来控制弹出框的显示与隐藏的

重点来了涉及到父组件传值给子组件了

第六步：父组件传值给子组件

第七步：子组件接受父组件接受的值，这就是通常所说的通过props接受父组件的值

弹出框出现了，哈哈哈哈

第八步：在子组件中填写数据啦，然后给父组件  this.formLabeAlign就是子组件获取到的表单中的值

重点又来啦，哈哈哈哈哈哈

第九步：父组件中通过子组件自定义的事件，来获取数据，听着是不是又有点懵懵的啦，哈哈我也是，自定义事件就是上一步我们刚刚随便的起的名字的事件，现在是不是理解了呢

第十步：这是是showChildMsg方法，我起的名字很随便的

懂了没呀，哈哈最后说一句，木有代码~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  我的代码放出来也是运行不了滴

下面是我项目中的其他需求了，我要把父组件中的值渲染到子组件的这个框中

首先我定义了一个对象

然后把获取到的值放在这个对象中

现在这个code对象中已经有我需要的值了，

现在子组件要接收父组件传过来的值啦

哈哈最后一步啦

vue中父子组件传值问题 通过props 和 $emit()方法的更多相关文章

  1. vue 中父子组件传值：props和$emit

    更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...

  2. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  3. Vue中父子组件执行的先后顺序探讨

    前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...

  4. Vue中非父子组件传值的问题

    父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...

  5. vue 非父子组件传值

    /*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...

  6. 简述vue中父子组件是怎样相互传递值的（基础向）

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

  7. Vue非父子组件传值

    <template> <div id="app"> <v-home></v-home> <br> <hr> ...

  8. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  9. vue 中父子组件之间的交互

    1,最直接的也是最简单的方法是利用props来数据传值. 子组件定义如下: props: { iconClass: { type: String, required: true }, classNam ...

随机推荐

  1. Pytorch中torch.load()中出现AttributeError: Can't get attribute

    原因:保存下来的模型和参数不能在没有类定义时直接使用. Pytorch使用Pickle来处理保存/加载模型,这个问题实际上是Pickle的问题,而不是Pytorch. 解决方法也非常简单,只需显式地导 ...

  2. MD笔记

    1.力场中的例子电荷是有效电荷(clayff),有别于化学式中的电荷. 2.游离状态的阳离子(如层间阳离子)的电荷不能变动:而Al-O八面体.Si-O四面体中的离子(Al.Si等)电荷可以微调. 3. ...

  3. 开始进行lammps手册的学习啦，跟着Manual一边翻译一边做吧！（转载）

    转载自:http://blog.sina.com.cn/s/blog_64813e370100ngsz.html 注明:黄色部分基本上为不懂的部分,红色字体为所做注释 一.各种文件的介绍: 1 in ...

  4. 产品经理培训教程视频大全与模板Axure rp9与8视频教程元件库模板

    注意:请仔细阅读购买,一旦发货百度网盘链接不能退~ 自动发邮件到买家留言处的邮箱,或注册淘宝时的邮箱自动通过旺旺给您发货还可以访问网页提取链接自助提取(复制到浏览器): http://4k5.cn/V ...

  5. DevOps系列(2)-SonarQube之PostgreSQL

    上一篇从整体上讲了下DevOps大概涉及到了哪些内容,以及主要工作流程,接下来我们将分步详细介绍各个部分的使用. 概览 首先从 SonarQube 开始说起,SonarQube 是一个可用于检测重复代 ...

  6. 兄弟们，我打算抠100个网站JS加密代码召唤，一个也跑不掉，这次轮到小虎牙

    摘要:友情提示:在博客园更新比较慢,有兴趣的关注知识图谱与大数据公众号吧.本次研究虎牙登录密码加密JS代码,难度不大,依然建议各位读者参考文章独自完成,实在抠不出来再参考这里的完整代码:从今天开始种树 ...

  7. 【pytest】teardown里的yield和addfinalizer

    在之前介绍pytest中的fixture用法的文章中https://zhuanlan.zhihu.com/p/87775743,提到了teardown的实现. 最近在翻pytest官方文档的时候,又发 ...

  8. rpc中的高并发

    手写一个高性能的rpc框架 模拟服务端,运行main函数,相当于启动服务器 public class ServerApplication { public static void main(Strin ...

  9. 软件开发流变史：从瀑布开发到敏捷开发再到DevOps

    作为在20世纪70年代.80年代盛极一时的软件开发模型,瀑布模型通过制定计划.需求分析.软件设计.程序编写.软件测试.运行维护等6个流程将整个软件生命周期衔接起来.这6个流程有着严格的先后次序之分,只 ...

  10. jinja2快速实现自定义的robotframework的测试报告

    一.背景 RF的结果报告可以方便我们查看每一条用例集.用例的执行结果统计,但是有的项目涉及到一些数据的比对,希望能够直观到看到数据,原生的测试报告就无法满足这个需求了. 原生的报告 项目需求报告格式 ...