详解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 相关文章推荐
使用JS读秒使用示例
Sep 21 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
React事件处理的机制及原理
Dec 03 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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中日期加减法运算实现代码
2011/12/08 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
异步加载script的代码
2011/01/12 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
JavaScript原型及原型链终极详解
2016/01/04 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
Python 列表list使用介绍
2014/11/30 Python
Python多进程fork()函数详解
2019/02/22 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
用python实现名片管理系统
2020/06/18 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
公务员培训心得体会
2013/12/28 职场文书
工作人员思想汇报
2014/01/09 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
失恋33天观后感
2015/06/11 职场文书
人与自然观后感
2015/06/16 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android