vue中父子组件传值问题 通过props 和 $emit()方法
(代码在最后)
1、父组件给子组件传值直接通过props,听着很简单,但是对于初学者来说还是比较难以理解的,今天小白通过自己的实践操作结合代码分析一下
案例 把模态框单独的抽离出来,当作一个组件
第一步:首先写好一个模态框 (我直接用的是element-ui中的dialog弹出框) 当作子组件
第二步:在父组件中引入 引入的时候注意一下自己的路径就可以了,这两步应该很容易吧,很容易理解的
第三步:在父组件中使用components注入这个组件
第四步:在父组件中直接使用就可以啦 ,说着容易,但是没实际做过的,还是比较难以理解的
第五步:在父组件data数据中,定义一个dialogFormVIsible :false 这个用来控制弹出框的显示与隐藏的
重点来了涉及到父组件传值给子组件了
第六步:父组件传值给子组件
第七步:子组件接受父组件接受的值,这就是通常所说的通过props接受父组件的值
弹出框出现了,哈哈哈哈
第八步:在子组件中填写数据啦,然后给父组件 this.formLabeAlign就是子组件获取到的表单中的值
重点又来啦,哈哈哈哈哈哈
第九步:父组件中通过子组件自定义的事件,来获取数据,听着是不是又有点懵懵的啦,哈哈我也是,自定义事件就是上一步我们刚刚随便的起的名字的事件,现在是不是理解了呢
第十步:这是是showChildMsg方法,我起的名字很随便的
懂了没呀,哈哈最后说一句,木有代码~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 我的代码放出来也是运行不了滴
下面是我项目中的其他需求了,我要把父组件中的值渲染到子组件的这个框中
首先我定义了一个对象
然后把获取到的值放在这个对象中
现在这个code对象中已经有我需要的值了,
现在子组件要接收父组件传过来的值啦
哈哈最后一步啦
vue中父子组件传值问题 通过props 和 $emit()方法的更多相关文章
- vue 中父子组件传值:props和$emit
更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...
- Vue中父子组件执行的先后顺序
Vera Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...
- Vue中父子组件执行的先后顺序探讨
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- Vue中非父子组件传值的问题
父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...
- vue 非父子组件传值
/*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...
- 简述vue中父子组件是怎样相互传递值的(基础向)
前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...
- Vue非父子组件传值
<template> <div id="app"> <v-home></v-home> <br> <hr> ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue 中父子组件之间的交互
1,最直接的也是最简单的方法是利用props来数据传值. 子组件定义如下: props: { iconClass: { type: String, required: true }, classNam ...
随机推荐
- 目录扫描、Nmap
一.基本定义 1.目录扫描: 扫描站点的目录,寻找敏感文件(目录名.探针文件.后台.robots.txt.备份文件等). 2.目录:站点结构,权限控制不严格. 3.探针文件:服务器配置信息,例:php ...
- Nordic52840SDK学习之定时器
Nordic 52840 SDK学习之定时器 今天开始学习52840SDK,特在此处记录学习内容,防止以后忘记,或许可以给以后的初学者提供一些帮助.如有错误,请发邮件至843036544@qq.com ...
- linux tmpfs及消耗内存脚本
一.tmpfs介绍 tmpfs是一种虚拟内存文件系统,正如这个定义它最大的特点就是它的存储空间在VM里面VM是由linux内核里面的vm子系统管理的东西,现在大多数操作系统都采用了虚拟内存管理机制VM ...
- WARNING: The host 'db01' could not be looked up with /data/mysql/bin/resolveip. This probably means that your libc libraries are not 100 % compatible with this binary MySQL version......
Linux系统安装MySQL,环境参数: 硬件配置:CPU: Xeon(R) CPU E5-2650 v4 @ 2.20GHz 8核内存:16G硬盘:系统盘200GB 数据盘1TB 操作系统CentO ...
- 个人项目WC.exe Node.js+electron实现
前言 实现语言:Javascript 编译工具:webstorm GitHub:https://github.com/NPjuan/WC.git 项目要求 wc.exe 是一个常见的工具,它能统计文本 ...
- pandas 数据库数据的读取
绝大多数公司都会选择将数据存入数据库中,因为数据库既可以存放海量数据,又可以非常便捷地实现数据的查询.下面以MySQL和SQL Server为例,来练习Pandas模块和 对应的数据库模块. 首先需要 ...
- Selenium的WebDriver API元素定位中的XPath和CSS
元素的定位和操作是自动化测试的核心部分,其中操作又是建立在定位的基础上的. 浏览器的常规操作 import time from selenium import webdriver # 打开浏览器 dr ...
- 类的加载,链接和初始化——1运行时常量池(来自于java虚拟机规范英文版本+本人的翻译和理解)
加载(loading):通过一个特定的名字,找到类或接口的二进制表示,并通过这个二进制表示创建一个类或接口的过程. 链接:是获取类或接口并把它结合到JVM的运行时状态中,以让类或接口可以被执行 初始化 ...
- .NET Core3.1 Dotnetty实战第二章
一.概要 在上一篇文章讲到Dotnetty的基本认识,本文这次会讲解dotnetty非常核心的模块是属于比较硬核的干货了,然后继续往下讲解如何根据自己的需求或者自己的喜好去配置Dotnetty而不是生 ...
- composer分析(二)结合PSR-4
composer分析(二)结合PSR-4 PSR-4提供了一种文件和路径映射关系,非常类似文件系统的组织结构 全限定类名 \<NamespaceName>(\<SubNamespac ...