解决Vue.js父组件$on无法监听子组件$emit触发事件的问题


Posted in Javascript onSeptember 12, 2018

最近学习vuejs看例子中用$on无法监听子组件$emit触发事件:

使用版本

vue.js 2.2.5

参考文献

1.vuejs API

2.解决实例

问题分析

1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);,这样this指的是todo-item的每一项,而最后vm.$on监听的是app组件,也就出说监听的是父节点,而触发的是子节点,故监听不到这个事件的。

解决思路

1.将触发事件放在父节点上触发,就可以监听到触发的事件了,即this.$parent.$emit("myclick",this.todo.text);,这样即可以在vm.$on监听到触发的事件了。

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Emit事件和On事件</title>
</head>
<script src="../js/vue.js"></script>
<link rel="stylesheet" href="../css/demo.css" rel="external nofollow" />
<body>
<div id="app">
 <todo-item v-for="(item,index) in items" v-bind:todo="item" v-on:myclick="addResult"></todo-item>
</div>
</body>
<script>
 Vue.component('todoItem',{
 props:['todo'],
 template:'<li v-on:click="add">{{todo.text}}</li>', //1.在自定义组件中加入点击事件传给add
 methods:{
  add:function(){   //2.这里的add拿到template中的点击事件add,并执行函数
  this.$parent.$emit("myclick",this.todo.text); //3.暴露给父组件中点击事件名称为my-click
  },
 },
 })
 var vm=new Vue({
  el:'#app',
  data:{
  items:[
   { text: 'Runoob' },
   { text: 'Google' },
   { text: 'Taobao' }
  ]
  },
  methods:{
  //5.这里执行父组件传递的点击函数
  addResult:function(value){
   alert(value);
  },
  },
 });
 vm.$on('myclick',function (value) {
  console.log(value);
 })
</script>
</html>

以上这篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
早该知道的7个JavaScript技巧
Mar 27 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
webpack入门+react环境配置
Feb 08 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 #Javascript
Vue.js 十五分钟入门图文教程
Sep 12 #Javascript
Vue通过ref父子组件拿值方法
Sep 12 #Javascript
webpack4 升级迁移的实现
Sep 12 #Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 #Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 #Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 #Javascript
You might like
PHP 中的类
2006/10/09 PHP
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
php字符串截取函数用法分析
2014/11/25 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
php框架知识点的整理和补充
2021/03/01 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
node后端服务保活的实现
2019/11/10 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
使用Python对MySQL数据操作
2017/04/06 Python
Python函数式编程
2017/07/20 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
Pytorch to(device)用法
2020/01/08 Python
python实现井字棋小游戏
2020/03/04 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
法制宣传实施方案
2014/03/13 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang