vue子组件的自定义事件
2023-09-14 08:58:55 时间
父子组件的信息传递无碍就是父组件给子组件传值(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-router
- 一套Vue的单页模板:N3-admin
- vue 【 子子组件 => 子组件 => 父组件 】 的事件和参数的传递
- vue 项目要使用的库
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue @Component] Simplify Vue Components with vue-class-component
- vue.js3: json格式化(vue@3.2.37 / vue-json-pretty@2.1.1)
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue子组件的自定义事件
- vuex结合vue-cookies的使用
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- vue.js3:用mitt发送接收事件消息(vue@3.2.6 / mitt@3.0.0)
- gin-vue-admin菜单配置教程:父子菜单
- vue elementUI表单输入时触发事件@input
- vue键盘事件:@keyup.down下方向键绑定事件
- vue事件修饰符:@click.capture捕获内层事件,从而改变默认的冒泡执行顺序
- vue事件修饰符:通过@click.capture捕获内层事件(爷爷-父亲-儿子)
- vue指令:v-on(@click)绑定点击事件,也就是方法
- 【视频】vue指令v-on绑定事件
- 移动端h5网页、微信网页调试之利用vConsole真机调试+显示控制台打印信息、调试接口(附带vue项目里的具体使用方法)
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- Vue学习之--------全局事件总线(2022/8/22)
- Vue中vue-i18n结合vant-ui实现国际化
- Vue中vue-i18n结合element-ui实现国际化
- Vue、Vuejs从入门到精通 | vue-router详解
- 134:vue+openlayers 编辑事件modifystart和modifyend(示例代码)
- 116:vue+openlayers的loadstart事件和loadend事件( 示例代码 )
- Vue(三)双向绑定、监视函数、事件修饰符、双向绑定原理
- Vue: vue-router路由
- Vue学习笔记——vue-router