子组件使用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()方法)的更多相关文章

  1. vue 子页面,向父页面 传值...

    子组件 通过 事件 向父组件传值..... 父组件 方法: methods: { appendData: function (list) { console.log(list); for (var i ...

  2. Vue 组件&组件之间的通信 之 子组件向父组件传值

    子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...

  3. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  4. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

  5. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  6. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  7. 使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)

    (本人想封装一个带有input输入框的组件) 之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的: 比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过 ...

  8. vue 关于子组件向父组件传值$emit触发无效问题

    先贴上代码 子组件代码 //子组件请求接口,用自己封装的axios getupdate(){ this.$post({ url:this.$apis.unitupdate, postType:'jso ...

  9. VUE 子组件向父组件传值 , 并且触发父组件方法(函数)

    目标:封装一个  搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数> 1.子组件 <div> <input v-model="l ...

  10. vue2.0 子组件和父组件之间的传值(转载)

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

随机推荐

  1. 【Unity3D】AudioSource组件

    1 简介 ​ 1)AudioSource 与 AudioListener 简介 ​ AudioSource(音频源)组件用于控制播放 AudioClip(音频片段),能够控制 2D 和 3D(距离越远 ...

  2. 我的小程序之旅十:微信公众号token验证失败

    为了更好的运营公众号,微信官方支持用户自定义实现公众号功能,这里第一步就是配置服务器回调域名,如下图: 如果是SpringBoot项目,我们会写一个如下的Controller类 import lomb ...

  3. Qt5.15.0 升级至 Qt5.15.9 遇到的一些错误

    按照之前我写的文章教程,可以很简单的编译出静态库(仅供学习交流) 编译 windows 上的 qt 静态库 编译出静态库后,替换旧版本的库,见我另一篇文章教程 VS2019 配置 QT 库 之所以没有 ...

  4. C++ 多线程的错误和如何避免(6)

    加锁的临界区要尽可能的紧凑和小型 问题分析: 当一个线程在临界区内执行时,所有其他试图进入临界区的线程都会被阻止,所以我们应该保证临界区尽可能的小.比如, void CallHome(string m ...

  5. SBI信息反馈法

    https://baijiahao.baidu.com/s?id=1605128367255769158&wfr=spider&for=pc

  6. 什么是数据同步利器DataX,如何使用?

    转载至我的博客 https://www.infrastack.cn ,公众号:架构成长指南 今天给大家分享一个阿里开源的数据同步工具DataX,在Github拥有14.8k的star,非常受欢迎,官网 ...

  7. React 中 Ref 引用

    不要因为别人的评价而改变自己的想法,因为你的生活是你自己的. 1. React 中 Ref 的应用 1.1 给标签设置 ref 给标签设置 ref,ref="username", ...

  8. Nebula Graph 源码解读系列|客户端的通信秘密——fbthrift

    概述 Nebula Clients 给用户提供了多种编程语言的 API 用于和 Nebula Graph 交互,并且对服务端返回的数据结构进行了重新封装,便于用户使用. 目前 Nebula Clien ...

  9. 4、dubbo的高可用

    1.zookeeper宕机与dubbo直连 现象:zookeeper注册中心宕机,还可以消费dubbo暴露的服务. 原因: 健壮性 l 监控中心宕掉不影响使用,只是丢失部分采样数据 l 数据库宕掉后, ...

  10. MySQL面经总结

    MySQL日志 MySQL日志系统 MySQL查询 菜鸟教程SQL内连接 exist和in区别 sql语句优化 MySQL索引 覆盖索引 索引类型:主键索引,二级索引(辅助索引):唯一索引,普通索引, ...