详解vue中this.$emit()的返回值是什么


Posted in Javascript onApril 07, 2019

vue中的三大属性:属性 、事件、插槽,---事件

在事件中有

普通事件:@click/@input/@change/@xxx...事件;

修饰符事件:@input.trim,@click.stop,@submit.prevent...一般用于原生html元素;

答:在vue中this.$emit(); 返回值是this;

代码示例:

在子组件中:Event.vue:接收通过父组件传递过来的props:{name:String} 属性; 在input 标签中:

  1. value=name; 绑定name属性;
  2. 通过@change="handleChange" 普通事件;监听输入框输入值;

在script 标签中:

通过 this.$emit("Echange", e.target.value, val => { console.log(val); }); 通过回调,传递值到父组件;自定义事件“Echange”;

<template>
 <div>
name: {{ name || "--" }}
<br />
<input :value="name" @change="handleChange" />
<br />
<br />
<div @click="handleDivClick">
 <button @click="handleClick">重置成功</button> 
 <button @click.stop="handleClick">重置失败</button>
</div>
 </div>
</template>

<script>
export default {
 name: "EventDemo",
 props: {
name: String
 },
 methods: {
handleChange(e) {
 const res = this.$emit("Echange", e.target.value, val => {
console.log(val);
 });
 console.log(res, res === this);
},
handleDivClick() {
 this.$emit("change", "");
},
handleClick(e) {
 // 都会失败
 e.stopPropagation();
}
 }
};
</script>

在父组件中通过监听子组件事件,对回调做出响应;

父组件可以通过回调函数,callback()向子组件传递一个值;

<template>
 
  <Event :name="name" @Echange="handleEventChange" />
 
 </template>
 
 <script>
 import Event from "./Event";
 
 export default {
  components: {
 Event,
  
  },
  data: () => {
 return {
  name: "",
  
 };
  },
  mounted() {
 
  },
  methods: {
  
 handleEventChange(val, callback) {
  this.name = val;
  callback("hello");
  return "hello";
 }
  }
 };
 </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
前台js调用后台方法示例
Dec 02 Javascript
js使用ajax读博客rss示例
May 06 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 #Javascript
javascrit中undefined和null的区别详解
Apr 07 #Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 #Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 #Javascript
js字符串处理之绝妙的代码
Apr 05 #Javascript
微信小程序自定义导航栏实例代码
Apr 05 #Javascript
Node.js事件的正确使用方法
Apr 05 #Javascript
You might like
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
laravel自定义分页效果
2017/07/23 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
校园门卫岗位职责
2013/12/09 职场文书
竞选演讲稿范文
2013/12/28 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
redis数据一致性的实现示例
2022/03/18 Redis
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL