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这两个工具(如果有不清楚的同学 ...
随机推荐
- 【Unity3D】使用GL绘制线段
1 前言 线段渲染器LineRenderer.拖尾TrailRenderer.绘制物体表面三角形网格从不同角度介绍了绘制线段的方法,本文再介绍一种新的绘制线段的方法:使用 GL 绘制线段. G ...
- Java8函数式接口Predicate实战
关于函数式接口 函数式接口 Funcational Interface 是指接口范围内只允许有一个抽象方法(不包括default和static方法)的接口.Java中有一些预定义的函数接口,如Pred ...
- Java并发编程实例--7.守护(Damon)线程
Java有一种特殊线程叫守护(后台)线程. 1.这类线程拥有非常低的优先级且通常只是在没有其他线程运行的情况下执行. 2.其通常作为无线循环服务去执行某项任务. 3.不能让他们去执行重要任务因为你不知 ...
- Java并发编程实例--2.获取和设置线程信息
常用线程属性 ID: 每个线程的唯一标识: Name: 线程名称: Priority: 线程优先级,从1-10,数字越大优先级越高:不推荐改变线程优先级: Status: 线程状态,包含6种状态:ne ...
- 案例分享:某品牌音响系列协议调试工具(搜寻主机,查询通道,基本控制API,云音乐API,语言节目API等,可增删改指令)
需求 某音响品牌需要一套完整的协议调试工具,提供给研发人员,渠道商,客户,现场人员等使用: 1.使用sqlite3数据库存储协议, 2.搜寻主机,操作主机: 3.探测云端API,调试API: ...
- 51从零开始用Rust编写nginx,江湖救急,TLS证书快过期了
wmproxy wmproxy已用Rust实现http/https代理, socks5代理, 反向代理, 负载均衡, 静态文件服务器,websocket代理,四层TCP/UDP转发,内网穿透等,会将实 ...
- 【Azure Key Vault】在Alteryx中使用Azure Key Vault存储账号和密码并实现无交互登录
问题描述: 需要在Alteryx中使用Azure Key Vault, Alteryx 能将数据发布到 Tableau,需要输入账号和密码,使用Azure Key Vault来替换这个输入账号和密码的 ...
- 【Azure APIM】APIM Self-Hosted网关中,添加网关日志以记录请求头信息(Request Header / Response Header)
问题描述 在APIM Gateway 日志中, 对于发送到APIM Host的请求,只记录了一些常规的URL, Status, Time, IP等信息.关于请求Header, Body中的信息,因为隐 ...
- 【Azure 应用服务】Java ODBC代码中,启用 Managed Identity 登录 SQL Server 报错 Managed Identity authentication is not available
问题描述 在App Service中启用Identity后,使用系统自动生成 Identity. 使用如下代码连接数据库 SQL Server: SQLServerDataSource dataSou ...
- 从全球顶级数据库大会 SIGMOD 看数据库发展趋势
本文来自 NebulaGraph 的软件工程师文豪在美国费城参加 2022 年 SIGMOD 大会时的见闻.SIGMOD 是数据库领域的顶级会议之一,是 CCF 数据库 / 数据挖掘 / 内容检索领域 ...