Vue自定义事件:触发自定义事件
一 项目结构
二 子组件(Mongo.vue)
<template>
<button @click="eat">按钮</button>
</template> <script>
export default {
created() {
this.$on("eat", function(fruit) {
console.log("子组件接收自己发射的事件");
});
},
methods: {
eat() {
console.log("子组件发射事件");
this.$emit("eat", "芒果");
}
}
};
</script>
<style>
</style>
三 父组件(App.vue)
<template>
<div id="app">
<h3>{{name}}</h3>
<!-- 子组件 -->
<mongo @eat='eat'/>
</div>
</template> <script>
import Mongo from "./components/Mongo"; export default {
name: "app",
data() {
return {
name: ""
};
},
methods: {
eat(fruit) {
console.log("父组件接收事件");
this.name = fruit;
}
},
components: { Mongo }
};
</script> <style>
</style>
四 运行效果
Vue自定义事件:触发自定义事件的更多相关文章
- vue中Enter触发登录事件和javascript中Enter触发点击事件
created(){ window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件 } 在methods中当keyC ...
- jquery移除事件,绑定事件,触发事件
$('.gcddfadf-btn-pay').unbind('click');//移除绑定事件 $('.gcddfadf-btn-pay').bind('click',function(){});// ...
- 函数计算自动化运维实战 2 -- 事件触发 eip 自动转移
函数计算 阿里云函数计算是一个事件驱动的全托管计算服务.通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传.函数计算会为您准备好计算资源,以弹性.可靠的方式运行您的代码,并提供日志查询,性能 ...
- JS基础知识:Javascript事件触发列表
Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言. JavaScript使我们有能 ...
- EventEmitter:nodeJs事件触发机制
Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列 Node.js 里面的许多对象都会分发事件:一个 net.Server 对象会在每次有新连接时触发一个事件, 一个 fs.r ...
- jQuery事件和JavaScript事件
1.JavaScript事件: 属性 当以下情况发生时,出现此事件 FF N IE onabort 图像加载被中断 1 3 4 onblur 元素失去焦点 1 2 3 onchange 用户改变域的内 ...
- node(2) EventEmitter类 事件队列 事件和error事件方法
事件队列的核心:事件触发与事件监听器功能的封装. // 引入 events 模块 var events = require('events'); // 创建 eventEmitter 对象 var e ...
- 移动端开发用touch事件还是click事件
前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发. 在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着 ...
- vue中触发键盘事件的两种方法和如何自定义键位事件,完整代码!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- uniapp仿h5+fire自定义事件触发监听
仿h5+fire自定义事件触发监听 uni-app调用 event.js 源码记录(点击查看) 1.js下载地址 [event.js](https://ext.dcloud.net.cn/plugin ...
随机推荐
- 循环结构 :while
循环结构 :while 循环四要素: 1.初始化条件 2.循环条件 3.循环体 4.迭代条件 格式: 1.初始化条件 while(2.循环条件){ 3.循环体 4.迭代条件 } public clas ...
- [2019CCPC网络赛][hdu6704]K-th occurrence(后缀数组&&主席树)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6704 题意为查询子串s[l...r]第k次出现的位置. 写完博客后5分钟的更新 写完博客才发现这份代码 ...
- Spring基础学习笔记
1. Spring入门 1. 1 Spring的体系结构 1.2 HelloWorld 1.2.1 Maven的使用 1)maven 的javase工程目录结构: 2)maven的settings.x ...
- 10-基于TMS320C6678+XC7K325T的6U CPCI Full Camera Link图像处理平台
基于TMS320C6678+XC7K325T的6U CPCI Full Camera Link图像处理平台 1.板卡概述 板卡由我公司自主研发,基于6UCPCI架构,处理板包含一片TI DSPTMS3 ...
- linux ab压力测试
1.安装 yum -y install httpd-tools 2.检测版本 ab -V 3.常用 ab -c -n 127.0.0.1/index.php #同时处理100个请求并运行10次inde ...
- No qualifying bean of type xxx' available 的一种解决方法
获取bean Class beanClass = Class.forName(event.className); FilterEvent filterEvent = (FilterEvent)Bean ...
- 使用rabbitctl添加用户
使用rabbitctl添加用户 第一.添加mq用户并设置密码 root@live-mq-01:~ # rabbitmqctl add_user mq 123456 1 root@live-mq-01: ...
- hashlib模块subprocess模块
'''通过一种算法,将字符串得出一种编码内容相同则hash运算结果相同,内容稍微改变则hash值改变不可逆推相同算法,无论校验多长的数据,得到的hash值长度固定'''# import hashlib ...
- Java面向对象(一) 类和对象
一.软件开发进化史 摘自<从零开始学架构> 机器语言(1940年) 最早的软件开发使用的是“机器语言”,直接使用二进制码0和1来表示机器可以识别的指令和数据. 汇编语言(20世纪40年代) ...
- USACO 2006 November Gold Corn Fields
USACO 2006 November Gold Corn Fields 题目描述: Farmer John has purchased a lush new rectangular pasture ...