[Vue]组件——通过$emit为组件自定义事件
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为组件自定义事件的更多相关文章
- vue通信之子父组件通信
子父组件通信: 创建一个父组件 Home , 创建一个子组件 Head Home 组件: import Head from "./Head.vue" // 引入 Head 组件 c ...
- Vue 自定义事件 && 组件通信
1 App.vue 2 <template> 3 <!-- 4 组件的自定义事件: 5 1.一种组件间通信的方式,使用于:子组件===>父组件 6 2.使用场景:A是父组件,B ...
- vue子组件的自定义事件
父子组件的信息传递无碍就是父组件给子组件传值(props和$attrs)和父组件触发子组件的事件($emit) 之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧-- 实际上 ...
- 【vue】vue组件的自定义事件
父组件: <template> <div> <my-child abcClick="sayHello"></my-child> &l ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- Vue2.0父子组件之间和兄弟组件之间的数据交互
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
- vue2.0中v-on绑定自定义事件
vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 ...
- vue2.0中v-on绑定自定义事件的理解
vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 ...
- vue深入了解组件——自定义事件
一.事件名 跟组件和prop不同,事件名不存在任何自动化的大小写转换.而是触发的事件名需要完全匹配监听这个事件所用的名称.举个例子,如果重复啊一个camelCase名字的事件: this.$emit( ...
随机推荐
- 使用paramiko的SFTP get或put整个目录
在<使用paramiko执行远程linux主机命令>中举例说明了执行远程linux主机命令的方法,其实paramiko还支持SFTP传输文件. 由于get或put方法每次只能传输一个文件, ...
- Pycharm 2018 1.2版本 Mac注册码激活码
此链接中较为详细的解决了次问题:http://www.orsoon.com/Mac/159477.html
- PKU 2082 Terrible Sets(单调栈)
题目大意:原题链接 一排紧密相连的矩形,求能构成的最大矩形面积. 为了防止栈为空,所以提前加入元素(0,0). #include<cstdio> #include<stack> ...
- 31. Next Permutation (下一个全排列)
Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...
- 2017浙江省赛 A - Cooking Competition ZOJ - 3958
地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3958 题目: "Miss Kobayashi's Drag ...
- Druid学习之路 (四)Druid的数据采集格式
作者:Syn良子 出处:https://www.cnblogs.com/cssdongl/p/9715735.html 转载请注明出处 Druid的数据采集格式 Druid可以采集非标准化的数据诸如J ...
- python中统计计数的几种方法
以下实例展示了 count() 方法的使用方法: 1 2 3 4 5 6 # !/usr/bin/python3 T = (123, 'Google', 'Runoob', 'Taobao', 1 ...
- debug教程
名称 解释 格式 a (Assemble) 逐行汇编 a [address] c (Compare) 比较两内存块 c range address d (Dump) 内存16进制显示 d [addre ...
- 20145201李子璇《网络对抗》逆向及Bof基础实践
20145201李子璇<网络对抗>逆向及Bof基础实践 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回 ...
- spring boot加mybatis使用Map返回时,当值为空时属性也会没有(转)
使用spring boot加mybatis时,设置Map返回,当值为空时属性也会没有,就会报错 在application.properties中加入下面配置,将会解决这个问题. #当查询数据为空时 ...