父组件通过props向子组件传递数据，子组件通过自定义事件向父组件传递信息。

在子组件中通过$emit触发事件，父组件在直接使用子组件的地方使用v-on(即@)来监听子组件触发的事件。

举例：（不知道怎么设置上传的图片，看不清的话，大家可以放大浏览器：ctrl+鼠标滚动）

子组件：

父组件：

vue--组件中的自定义事件的更多相关文章

  1. vue组件中—bus总线事件回调函数多次执行的问题

    在利用vue组件进行事件监听时发现,如果对N个vue组件实例的bus总线绑定同一事件的回调函数,触发任意组件的对应事件,回调函数至少会被执行N次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...

  2. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  3. 使用VUE组件创建SpreadJS自定义单元格(二)

    在上篇中,我们介绍了如何通过设置runtimeCompiler为true,在Vue中实现了动态创建电子表格组件.想了解具体内容可看点击查看使用VUE组件创建SpreadJS自定义单元格(一). 但是在 ...

  4. wpf自定义控件中使用自定义事件

    wpf自定义控件中使用自定义事件 1 创建自定义控件及自定义事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...

  5. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

  6. vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  7. vue组件中的样式属性--scoped

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...

  8. vue组件中使用iframe元素

    需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...

  9. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  10. vue组件中的data为什么是函数？

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

随机推荐

  1. JavaScript基本类型与引用类型（二）

    前文已经对基本类型和引用类型作了简单的介绍,本文将进一步介绍基本类型和引用类型. 基本包装类型 为了方便操作基本类型的值,JavaScript提供了特殊的引用类型:Boolean.Number.Str ...

  2. 2016/4/7 datatype：①json ②XML

    ①JSON 1,postjsonxml.php     json用循环方式处理传来的值  for(key in data) for(var i=0;i<data.length;i++){data ...

  3. 提高比特率 有损 无损 Video-and-Audio-file-format-conversion 视频声音转码

    3 Ways to Change Bitrate on MP3 Files https://www.online-tech-tips.com/software-reviews/change-bitra ...

  4. id 查询

    Ids Query | Elasticsearch Reference [6.2] | Elastic http://www.elastic.co/guide/en/elasticsearch/ref ...

  5. ios UIWebView 播放优酷土豆视频

    将以下的代码嵌套在html里.然后webView载入这个网页.或这段html码,即可了,无须要使用像网上说的html5去兼容 watermark/2/text/aHR0cDovL2Jsb2cuY3Nk ...

  6. 设计模式-（17）策略模式 （swift版）

    一,概念: 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使他们可以相互替换,让算法独立于使用它的客户而独立变化. 二,使用场景 1.针对同一类型问题的多种处理方式,仅仅是具体行为有差别时: ...

  7. 安卓输入子系统之inotify与epoll机制【学习笔记】【原创】

    平台信息:内核:linux3.1.0系统:android5.0平台:tiny4412 作者:庄泽彬(欢迎转载,请注明作者) 说明: 韦老师的安卓视频学习笔记 一.在安卓的输入子系统中如何监听文件的产生 ...

  8. bzoj1833: [ZJOI2010]count 数字计数&&USACO37 Cow Queueing 数数的梦（数位DP）

    难受啊,怎么又遇到我不会的题了(捂脸) 如题,这是一道数位DP,随便找了个博客居然就是我们大YZ的……果然nb,然后就是改改模版++注释就好的了,直接看注释吧,就是用1~B - 1~A-1而已,枚举全 ...

  9. YTU 2904: B--Faultfinding

    2904: B--Faultfinding 时间限制: 1 Sec  内存限制: 128 MB 提交: 64  解决: 33 题目描述 Do you remember the game in whic ...

  10. Entity Framework 学习整理

    MSDN: http://msdn.microsoft.com/en-us/data/aa937723 台湾博客: http://www.dotblogs.com.tw/yc421206/ http: ...