1.在定义组件时调用内建的 $emit 方法并传入事件的名字,来向父级组件触发一个事件enlarge-text:

Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<button v-on:click="$emit('enlarge-text')">
Enlarge text
</button>
<div v-html="post.content"></div>
</div>
`
})

 代码解释:<button v-on:click="$emit('enlarge-text')">:监听click事件,click事件被触发时触发enlarge-text事件

2.用 v-on 在上述组件上监听这个事件,就像监听一个原生 DOM 事件一样:

<blog-post
...
v-on:enlarge-text="postFontSize += 0.1"
></blog-post>
代码解释:v-on:enlarge-text:监听enlarge-text事件,enlarge-text事件被触发时执行postFontSize += 0.1

详情见官网:https://cn.vuejs.org/v2/guide/components.html

[Vue]组件——通过$emit为组件自定义事件的更多相关文章

  1. vue通信之子父组件通信

    子父组件通信: 创建一个父组件 Home , 创建一个子组件 Head Home 组件: import Head from "./Head.vue" // 引入 Head 组件 c ...

  2. Vue 自定义事件 && 组件通信

    1 App.vue 2 <template> 3 <!-- 4 组件的自定义事件: 5 1.一种组件间通信的方式,使用于:子组件===>父组件 6 2.使用场景:A是父组件,B ...

  3. vue子组件的自定义事件

    父子组件的信息传递无碍就是父组件给子组件传值(props和$attrs)和父组件触发子组件的事件($emit) 之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧-- 实际上 ...

  4. 【vue】vue组件的自定义事件

    父组件: <template> <div> <my-child abcClick="sayHello"></my-child> &l ...

  5. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  6. Vue2.0父子组件之间和兄弟组件之间的数据交互

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...

  7. vue2.0中v-on绑定自定义事件

    vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 ...

  8. vue2.0中v-on绑定自定义事件的理解

    vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 ...

  9. vue深入了解组件——自定义事件

    一.事件名 跟组件和prop不同,事件名不存在任何自动化的大小写转换.而是触发的事件名需要完全匹配监听这个事件所用的名称.举个例子,如果重复啊一个camelCase名字的事件: this.$emit( ...

随机推荐

  1. 使用paramiko的SFTP get或put整个目录

    在<使用paramiko执行远程linux主机命令>中举例说明了执行远程linux主机命令的方法,其实paramiko还支持SFTP传输文件. 由于get或put方法每次只能传输一个文件, ...

  2. Pycharm 2018 1.2版本 Mac注册码激活码

    此链接中较为详细的解决了次问题:http://www.orsoon.com/Mac/159477.html

  3. PKU 2082 Terrible Sets(单调栈)

    题目大意:原题链接 一排紧密相连的矩形,求能构成的最大矩形面积. 为了防止栈为空,所以提前加入元素(0,0). #include<cstdio> #include<stack> ...

  4. 31. Next Permutation (下一个全排列)

    Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...

  5. 2017浙江省赛 A - Cooking Competition ZOJ - 3958

    地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3958 题目: "Miss Kobayashi's Drag ...

  6. Druid学习之路 (四)Druid的数据采集格式

    作者:Syn良子 出处:https://www.cnblogs.com/cssdongl/p/9715735.html 转载请注明出处 Druid的数据采集格式 Druid可以采集非标准化的数据诸如J ...

  7. python中统计计数的几种方法

    以下实例展示了 count() 方法的使用方法: 1 2 3 4 5 6 # !/usr/bin/python3   T = (123, 'Google', 'Runoob', 'Taobao', 1 ...

  8. debug教程

    名称 解释 格式 a (Assemble) 逐行汇编 a [address] c (Compare) 比较两内存块 c range address d (Dump) 内存16进制显示 d [addre ...

  9. 20145201李子璇《网络对抗》逆向及Bof基础实践

    20145201李子璇<网络对抗>逆向及Bof基础实践 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回 ...

  10. spring boot加mybatis使用Map返回时,当值为空时属性也会没有(转)

    使用spring boot加mybatis时,设置Map返回,当值为空时属性也会没有,就会报错 在application.properties中加入下面配置,将会解决这个问题.   #当查询数据为空时 ...