(尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
自定义事件:
我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢?
这个时候Vue的自定义事件系统就派得上用场了.
自定义事件知道两件事:
(1).绑定
(2).触发
注意:$on(eventName,回调函数)
==================================================================
之前App.vue和TodoHeader.vue组件之间传递信息靠的是函数的形式
而现在vue自定义事件代替传函数这种形式
现在改成这这种形式:
名字就起回调函数的名字
<!--给TodoHeader标签对象绑定addTodo事件监听-->
以前是调用addTodo函数,现在没有了
现在需要触发事件($emit()),通知addTodo函数去调用
方法://触发自定义事件:addTodo
//触发事件需要指定事件名,还需要指定传递数据
//一触发触发事件,回调函数需要调用addTodo,需要接收todo
this.$emit('addTodo',todo)
===================================================================
第二种方法:使用$on(eventName)监听事件;vue中自己实现的一套机制,用的不多
如:现在只留下,没有传任何参数
但是,TodoHeader.vue中有触发事件
这时,App.vue需要绑定一个监听
mounted(){// 执行异步代码
//给<TodoHeder/>绑定addTodo事件监听
//指定事件名和回调函数
//监听绑定在this上面,this现在指App.vue组件,而现在需要绑定TodoHeader.vue组件,不对
this.$on('addTodo',this.addTodo)//有问题
}
故现在需要找到下面这个标签
header属性指向了<TodoHeader ref="header"/>标签对像
相关文章
- import Vue from 'vue';
- (尚034)Vue_案例_数据存储优化(代码优化!!!)
- 【Vue】单文件的组件(.vue)代码实例
- Node+TS+Koa+vue 商城全栈(十一)快速删除文件
- Vue - 超详细 “纯前端“ 将阿里云 OSS 文件删除流程,支持单个 / 批量删除文件(附带完整示例运行源码,保证新手小白 100% 轻松实现删除功能)
- vue 解析二维码
- vue监听浏览器关闭
- Mockjs---自定义静态数据---Vue ui视图化的创建项目的笔记
- VUE-015-解决 vue install 引发的 failed Error: not found: python2 问题
- Vue 动态粒子特效(vue-particles)
- vue学习笔记十:Vue中引入jquery
- vue学习笔记五:Jquery VS Vue之事件监听明细对照
- vue文档摘录九:Vue Router
- Vue 安装“npm install -g @vue/cli”发生npm WARN deprecated request@2.88.2: request has been deprecated,的错误解决方法
- vue-devtools 开发工具的安装
- 初识Vue之基础指令使用(初学者请进~)
- Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- 01—Vue
- SpringBoot+Vue实现的仿小米电子产品售卖商城系统 附带详细运行指导视频
- Vue学习第33天——路由守卫(导航守卫)超详解讲解及使用场景、案例练习
- Vue学习第26天——vuex中的模块化和命名空间的详解及案例练习
- Vue学习第21天——插槽slot的理解及案例
- Vue开发实例(02)之将Vue项目代码导入到IDEA并运行
- vue.js中el是什么中el是什么
- vue-解决Vue打包上线之后部分CSS不生效的问题
- 懒人必备:使用vue ui创建vue项目
- webpack中require.context自动化注册,vue应用
- 分析初识vue小案例
- Vue基本的内置指令