(代码在最后)

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. Golang中使用set

    两种 go 实现 set 的思路, 分别是 map 和 bitset. map 的 key 肯定是唯一的,而这恰好与 set 的特性一致,天然保证 set 中成员的唯一性.而且通过 map 实现 se ...

  2. linux下udev和mdev的使用

    linux下设备文件系统有devfs.udev和mdev这三种. 一.devfs devfs是由Linux 2.4内核引入的,引入时被许多工程师给予了高度评价,它的出现使得设备驱动程序能自主地管理自己 ...

  3. 计算机网络-链路层(2)多路访问控制协议(multiple access control protocol)

    单一共享广播信道,如果两个或者两个以上结点同时传输,会互相干扰(interference) 冲突(collision):结点同时接收到两个或者多个信号→接收失败! MAC协议采用分布式算法决定结点如何 ...

  4. 小程序5:FTP程序

    目录 1.FTP程序所需要的知识点 2.FTP程序具体实现过程 2.1 FTP程序之注册功能 2.2 FTP程序之登录功能 2.3 FTP程序之下载功能 3.FTP程序源代码 FTP程序所需要的知识点 ...

  5. 牛客网PAT练习场-个位数的统计

    思路:每接受一个字符,便统计一次即可 题目地址:https://www.nowcoder.com/questionTerminal/a2063993dd424f9cba8246a3cf8ef445 # ...

  6. 区块链入门到实战(29)之Solidity – 环境搭建

    在线开发环境Remix(推荐) 学习Solidity推荐使用在线开发环境Remix,本教程的例子将使用Remix开发运行. 安装本地编译器 安装 nodejs / npm node官方网站下载node ...

  7. ent orm笔记2---schema使用(上)

    在上一篇关于快速使用ent orm的笔记中,我们再最开始使用entc init User 创建schema,在ent orm 中的schema 其实就是数据库模型,在schema中我们可以通过Fiel ...

  8. jmeter参数化之 【CSV Data Set Config/CSV数据配置文件】

    这里以登录功能为例: 1.新建.txt文件,将参数值写入到txt文件中(多个参数值如:用户名,密码 之间以逗号隔开),将文件放置在想要放置的目录下 2.添加csv数据文件设置 右键线程组->添加 ...

  9. vue刷新数组

    困扰我两天的问题被一行代码解决了!!! 最近在做某个功能时用到了v-for,页面内容都是根据父页面传递过来的数组生成的,但是当我改变数组内容时页面不会跟着改变.这个问题足足困扰了我两天时间,最终下面的 ...

  10. SpiderMonkey教程

    https://technotales.wordpress.com/2009/06/07/spidermonkey-introduction/ https://developer.mozilla.or ...