Vue子组件向父组件传值(this.$emit()方法)
子组件使用this.$emit()向父组件传值
首先必须在父组件中引用子组件,然后实现传值
第一步在父组件中引入子组件
import UnitByPurchaseAddOrUpdate from '@views/modules/matter/UnitByPurchaseAddOrUpdate'
声明
//定义组件
components: {
UnitByPurchaseAddOrUpdate
},
使用
<unit-by-purchase-add-or-update
ref="UnitByPurchaseAddOrUpdate" v-on:closeMain="closeMain">
</unit-by-purchase-add-or-update>
第二步子组件向父组件传值
1. 在子组件中需要向父组件传值处使用this.$emit("function",param); //其中function为父组件定义函数,param为需要传递参数
add(){
let flag = false;
this.$emit('closeMain',flag);
},
2. 在父组件中子组件引用处添加函数v-on:function="function()"; //其中function为子组件中定义函数,function1为父组件定义函数--用于接收子组件传值并进行相应数据处理,可定义为同一名称
v-on: 可用 @ 代替 @function="function1" ,@ 为 v-on:的简写
<unit-by-purchase-add-or-update
ref="UnitByPurchaseAddOrUpdate" v-on:closeMain="closeMain">
val及为子组件中flag,即接收的子组件参数
closeMain(val){
this.flag = val;
},
Vue子组件向父组件传值(this.$emit()方法)的更多相关文章
- vue 子页面,向父页面 传值...
子组件 通过 事件 向父组件传值..... 父组件 方法: methods: { appendData: function (list) { console.log(list); for (var i ...
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- 使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)
(本人想封装一个带有input输入框的组件) 之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的: 比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过 ...
- vue 关于子组件向父组件传值$emit触发无效问题
先贴上代码 子组件代码 //子组件请求接口,用自己封装的axios getupdate(){ this.$post({ url:this.$apis.unitupdate, postType:'jso ...
- VUE 子组件向父组件传值 , 并且触发父组件方法(函数)
目标:封装一个 搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数> 1.子组件 <div> <input v-model="l ...
- vue2.0 子组件和父组件之间的传值(转载)
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
随机推荐
- 微信小程序实现原理
微信小程序实现原理 微信小程序采用wxml.wxss.javascript进行开发,本质是一个单页应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用原生的各种接口.微信的架 ...
- 启动MySQL5.7服务无法启动或Table 'mysql.plugin' doesn't exist
首先说一下我这个是mysql5.7.16免安装版,不过这个问题对于5.7版本应该都适用. 问题重现: 安装过程也说一下吧: 1.将下载的压缩文件解压到指定目录, 我的是:E:\program\ ...
- 溯源反制-Mysql蜜罐
东西比较老,类似的文章网上已经很多,原理主要是通过服务端的load data动作可以主动向客户端获取文件. 看过hfish等自带的mysql蜜罐读取/etc/passwd,感觉还差点实用性.这次文章主 ...
- redis7源码分析:redis 多线程模型解析
多线程模式中,在main函数中会执行InitServerLast void InitServerLast() { bioInit(); // 关键一步, 这里启动了多条线程,用于执行命令,redis起 ...
- 擅长使用iter
def populate_ranks(votes, ranks): names = list(votes.keys()) names.sort(key=votes.get, reverse=True) ...
- 本机复制的内容粘贴不到VMware虚拟机里面的解决办法
分析 VMware正确安装完linux虚拟机之后,这里以Ubuntu为例,如果你使用的默认配置,正常情况下就可以复制.粘贴和拖拽内容的,双方向都是支持的.如果不能复制和拖拽一般是vmware tool ...
- 一次kafka消息丢失问题处理
背景&现象 生产微服务架构环境,kafka消息消费服务架构如下: 当服务B接口出现宕机或者B接口调用超时,kafka消息消费端服务A出现异常,异常发生后未执行手动提交offset操作.待服务B ...
- 【Azure 应用服务】在Azure上部署一套VUE框架的单页面应用,有什么可以参考的文档呢?
问题描述 在Azure上部署一套VUE框架的单页面应用,有什么可以参考的文档呢? 问题回答 Azure官方上并没有VUE框架的实例代码,但是可以参考Node JS项目,来进行设置. 在 Azure 中 ...
- Nebula Graph 源码解读系列 | Vol.06 MATCH 中变长 Pattern 的实现
目录 问题分析 定长 Pattern 变长 Pattern 与变长 Pattern 的组合 执行计划 拓展一步 拓展多步 保存路径 变长拼接 总结 MATCH 作为 openCypher 语言的核心, ...
- Java11改进的垃圾回收器
传统的C/C++等编程语言,需要程序员负责回收已经分配的内存.显示进行垃圾回收是一件比较困难的事情,因为程序员并不总是知道内存应该何时被释放.如果一些分配出去的内存得不及时回收,就会引起系统运行速度下 ...