详解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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
php中strtotime函数用法详解
2014/11/15 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
python中requests小技巧
2017/05/10 Python
Python常见异常分类与处理方法
2017/06/04 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python中print函数简单使用总结
2019/08/05 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
党支部活动策划方案
2014/08/18 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
应届毕业生自荐信
2015/03/04 职场文书
小爸爸观后感
2015/06/15 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
德劲DE1102数字调谐收音机机评
2022/04/07 无线电