解决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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
Javascript string 扩展库代码
Apr 09 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
详解Node.js使用token进行认证的简单示例
May 25 Javascript
js+css3实现简单时钟特效
Sep 13 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 mysql索引问题
2008/06/07 PHP
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
javascript表单验证和Window详解
2014/12/11 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
原生js实现九宫格拖拽换位
2021/01/26 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
python3编写C/S网络程序实例教程
2014/08/25 Python
python中ConfigParse模块的用法
2014/09/29 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
Django实现跨域请求过程详解
2019/07/25 Python
python3 enum模块的应用实例详解
2019/08/12 Python
Django模板语言 Tags使用详解
2019/09/09 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
关于Python-faker的函数效果一览
2019/11/28 Python
Python表达式的优先级详解
2020/02/18 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
电信专业毕业生推荐信
2013/11/18 职场文书
我的长征观后感
2015/06/09 职场文书
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技