详解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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
JavaScript错误处理
Feb 03 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
JavaScript WeakMap使用详解
Feb 05 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中定时计划任务的实现原理
2013/01/08 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
js 深拷贝函数
2008/12/04 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
Python3中的json模块使用详解
2018/05/05 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
文秘专业个人求职信
2013/12/22 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
指导教师评语
2014/04/26 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
工地宣传标语
2014/06/18 职场文书
国企干部对照检查材料
2014/08/22 职场文书
现场活动策划方案
2014/08/22 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
人工作失职检讨书
2015/05/05 职场文书
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS