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 ...
随机推荐
- flume 进阶
一.flume事务 put事务流程: 1.doPut:将批量数据先写入临时缓冲区putList 2.doCommit:检查Channel内存队列是否足够, (1)达到一定时间没有数据写入到putLis ...
- [BZOJ5099]Pionek
Description 给 \(n\) (\(n\le 2\times 10 ^5\)) 个向量,现在你在 \((0,0)\) ,选择一些向量使你走的最远. Solution 自己的想法:按极角排序后 ...
- Mybatis中SqlSessionFactory和SqlSession学习和原理
源码git地址:https://github.com/mybatis/mybatis-3 目标结构: mybatis是数据持久化解决方案将用户从JDBC访问中解放出来,用户只需要定义需要操作的SQL语 ...
- ARM汇编3
一. 什么是协处理器? 1.1. SoC内部另一处理核心,协助主CPU实现某些功能,被主CPU调用执行一定任务. 1.2. ARM设计上支持多达16个协处理器,但是一般SoC只实现其中的CP15.(c ...
- Java7/8 中的 HashMap 和 ConcurrentHashMap 全解析 (转)
阅读前提:本文分析的是源码,所以至少读者要熟悉它们的接口使用,同时,对于并发,读者至少要知道 CAS.ReentrantLock.UNSAFE 操作这几个基本的知识,文中不会对这些知识进行介绍.Jav ...
- mysql事务的特性?
1.原子性(Atomicity):事务中的全部操作在数据库中是不可分割的,要么全部完成,要么均不执 行. 2.一致性(Consistency):几个并行执行的事务,其执行结果必须与按某一顺序串行执行的 ...
- c# 实现ComboBox自动模糊匹配
ComboBox自带有属性可以实现自动匹配,但是它有一个弊端,只能从头开始匹配,例如"李四LS",只能输入“李四”或"李"才能匹配出来,而输入"LS& ...
- Maya2017下载安装与激活
目录 1. 更多推荐 2. 下载地址 2.1. OneDrive 2.2. 百度云 3. 安装激活步骤 1. 更多推荐 其他Maya版本的下载与激活:https://www.cnblogs.com/c ...
- idea中ehcahe配置中 Cannot find the declaration of element 'ehcache'.
ehcahe.xml 中报错: Cannot find the declaration of element 'ehcache'. 打开settings->languages&frame ...
- 阿里云ECS VSFTP上传本地文件
开始终端 购买云服务,获得公网IP,内网IP 控制台首页获得 获得终端连接密码 连接终端,输入连接密码 获得终端界面,进入终端 上传文件 ## .安装VSFTP服务器程序 yum install vs ...