子组件使用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. MOS 管工作原理

    浅谈MOS管的工作原理_数字IC修行者的博客-CSDN博客_mos管工作原理 一文讲明白MOS管工作原理 - 知乎 (zhihu.com) 闪存基本原理 (sohu.com)

  2. Linux进程通信 | 信号

    一.什么是信号? 信号就像是一个突然的电话铃声,它会打断正在进行的程序并引起其注意. 在Linux系统中,信号是一种软件中断,它通常是异步发生的,可以用来通知进程某个事件已经发生..每个信号都有一个唯 ...

  3. XML和JSON的比较

    XML和JSON的比较 XML与JSON都可以用来描述或者存储数据,两者都有各自的优点,使用场景取决于需求. 描述 XML 可扩展标记语言Extensible Markup Language,是一种用 ...

  4. win10下开启IIS部署网站

    今天测试一个有关IIS的安全漏洞用了下win10下的IIS,记录一下,供网友参考. 1.启用IIS 依次点开: 控制面板-----程序----启用或关闭Windows功能 以下图片中打钩的地方全勾上. ...

  5. 栈溢出-ret2libc地址泄露笔记

    作为一名初学者,在碰到很多攻击思路的时候会感觉很妙,比如gadget的构造,这题的sh参数截断. 1.首先分析程序架构和保护措施. 2.使用IDA开始判断程序是否具备最简单的栈溢出执行条件: ret2 ...

  6. Qt+ECharts开发笔记(一):ECharts介绍、下载和Qt调用ECharts基础柱状图Demo

    前言   使用Qt开发大数据可视化看板,基于Qt使用QWidget或者QML是很难达到ECharts大数据看板的效果,所以使用Qt来制作.   核心思想   每一个ECharts图表使用一个无边框的Q ...

  7. 迭代器,map,filter,reduce,sorted函数---day12

    1.迭代器 迭代器能被next调用,并不断返回下一个值的对象,叫作迭代器(迭代器是对象) 概念:迭代器指的是迭代取值的工具,迭代是一个重复的过程每次重复都是基于上一次的结果而继续单纯的重复不是迭代. ...

  8. c# rdkafka 设置偏移量(offset)

    参考资料: librdkafka: 如何设置Kafka消费者订阅消息的起始偏移位置 领导要求kafka消费者端消费最新的数据. 不知道怎么设置偏移量,查了资料. 用惯了封装好的东西,都不知道怎么设置了 ...

  9. 如何优化好UITableView,值得思考

    如果你觉得 UITableViewDelegate 和 UITableViewDataSource 这两个协议中有大量方法每次都是复制粘贴,实现起来大同小异:如果你觉得发起网络请求并解析数据需要一大段 ...

  10. 【Azure 微服务】面对Service Fabric中节点状态不正常(Disabling/Warning/RemoveNode)的几种尝试解决方案

    问题描述 发现 Service Fabric 的节点状态异常,如出现 Disabling, Warning,或者 RemoveNode的情况,并且持续很长时间都没有变化(2小时以上).如何来缓解这种问 ...