vue子组件的自定义事件
父子组件的信息传递无碍就是父组件给子组件传值(props和$attrs)和父组件触发子组件的事件($emit)
之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧~~
实际上挺简单:
父组件:
<template>
<div>
<my-child abcClick="sayHello"></my-child>
</div>
</template> <script>
export default {
method: {
sayHello(Num,Str) {
alert('hello world~~' + Num + Str)
}
}
}
</script>
子组件:
<template>
<div>
<!--例如最简单的封装一个按钮-->
<button @click="childClick"></button>
</div>
</template> <script>
export default {
data: {
return{
myNum: 456,
myStr: 'haha'
}
},
method: {
childClick() {
this.$emit('abcClick', this.myNum, this.myStr)
}
}
}
</script>
核心就是通过$emit来触发自定义事件(不需要注册),并且传值出去
vue子组件的自定义事件的更多相关文章
- vue子组件使用自定义事件向父组件传递数据
使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...
- Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
- vue子组件向父组件传值
vue2.0中通过$emit事件在子组件中自定义事件,通过操作子组件中的事件,向父组件传递参数: 首先写一个叫做parentComp.vue的父组件: <template> <div ...
- vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- Vue组件绑定自定义事件
Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...
- Vue 子组件调用父组件 $emit
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Vue:子组件如何跟父组件通信
我们知道,父组件使用 prop 传递数据给子组件.但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了. 使用 v-on 绑定自定义事件 每个 Vue 实例都实现了事件接口,即 ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
随机推荐
- idea 开启 tomcat 访问日志记录
all 为 设置为 查看所有类型的请求 (包括ajax)
- stl源码剖析 详细学习笔记deque(1)
//--------------------------15/3/12---------------------------- deque { deque没有容量(capacity)观念,是动态分段的 ...
- C#_Stream
IO操作基本上需要用到Stream相关的子类,因此这类问题在CSDN问得也是比较多.其实对于Stream来说,操作起来比较简单,只要对细节的处理稍微注意一下,相信在使用它的时候也会得心应手. 对于St ...
- Python对Selenium调用浏览器进行封装包括启用无头浏览器,及对应的浏览器配置文件
""" 获取浏览器 打开本地浏览器 打开远程浏览器 关闭浏览器 打开网址 最大化 最小化 标题 url 刷新 Python对Selenium封装浏览器调用 ------b ...
- HDU排序水题
1040水题; These days, I am thinking about a question, how can I get a problem as easy as A+B? It is fa ...
- proe工程图输出dwg/dxf文件设置
网上看到不少人分享proe转转dxf/dwg配置文件的,但是看了一圈,几乎都没有涉及到转化线型的,所以自己整理自己的配置文件,写在这里分享出来. 以Pro/engineer WF5.0为例: 1.复制 ...
- 金蝶盘点机PDA仓库条码管理家电类序列号扫描操作方法-采购入库单
1.1. 采购入库单 传统的进销存管理软件需要人工识别商品品种,清点商品数量,然后再去人工手工在电脑上一行行的录入采购入库单.录单效率低,误差大. 如果使用汉码盘点机PDA,入库时,仓管员只需要手持 ...
- 华为笔试——C++平安果dp算法
题目:平安果 题目介绍:给出一个m*n的格子,每个格子里有一定数量的平安果,现在要求从左上角顶点(1,1)出发,每次走一格并拿走那一格的所有平安果,且只能向下或向右前进,最终到达右下角顶点(m,n), ...
- Linux内核分析 NO.3
跟踪分析Linux内核的启动过程 于佳心 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-100002 ...
- docker简易实践
docker简易实践 实验环境 操作系统:deepin 15.4 安装步骤 1.安装docker sudo apt-get install docker.io 2.启动docker服务 sudo se ...