详解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 相关文章推荐
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
vue上传图片组件编写代码
Jul 26 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 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
PHP自动生成月历代码
2006/10/09 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
php类常量的使用详解
2013/06/08 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
php三元运算符知识汇总
2015/07/02 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
JavaScript经典案例之简易计算器
2020/08/24 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
对python中的装包与解包实例详解
2019/08/24 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
总经理助理的八要求
2013/11/12 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
庆七一活动方案
2014/01/25 职场文书
母校寄语大全
2014/04/10 职场文书
地球一小时倡议书
2014/04/15 职场文书
保险专业求职信
2014/07/07 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
2014年小学工作总结
2014/11/26 职场文书
信用卡收入证明范本
2015/06/12 职场文书