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

 更新时间:2019年04月07日 10:23:27   作者:GeekQiaQia  
这篇文章主要介绍了详解vue中this.$emit()的返回值是什么,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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>

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

相关文章

  • 传说中VUE的语法糖到底是做什么的

    传说中VUE的语法糖到底是做什么的

    从接触Vue我们就知道 v-model是实现数据双向绑定的那他能实现绑定的原理到底是啥?最常见的语法糖 v-model,今天通过案例给大家详细介绍下,需要的朋友参考下吧
    2021-09-09
  • vue axios接口请求封装方式

    vue axios接口请求封装方式

    这篇文章主要介绍了vue axios接口请求封装方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue2中基于vue-simple-upload实现文件分片上传组件功能

    vue2中基于vue-simple-upload实现文件分片上传组件功能

    这篇文章主要介绍了vue2中基于vue-simple-upload的文件分片上传组件,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 学习Vue框架中必掌握的重点知识

    学习Vue框架中必掌握的重点知识

    这篇文章主要介绍了学习Vue中必掌握的重点知识,想了解vue的同学可以参考下
    2021-04-04
  • 使用Vite处理css less及postcss示例详解

    使用Vite处理css less及postcss示例详解

    这篇文章主要为大家介绍了使用Vite处理css less及postcss的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue.js仿Metronic高级表格(二)数据渲染

    Vue.js仿Metronic高级表格(二)数据渲染

    这篇文章主要为大家详细介绍了Vue.js仿Metronic高级表格的数据渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Vue3 PC端页面开发规范及说明

    Vue3 PC端页面开发规范及说明

    这篇文章主要介绍了Vue3 PC端页面开发规范及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue项目部署上线遇到的问题及解决方法

    vue项目部署上线遇到的问题及解决方法

    这篇文章主要介绍了vue项目部署上线遇到的问题及解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-06-06
  • vue devserver及其配置方法

    vue devserver及其配置方法

    这篇文章主要介绍了vue devserver及其配置方法,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • vue请求本地自己编写的json文件的方法

    vue请求本地自己编写的json文件的方法

    这篇文章主要介绍了vue请求本地自己编写的json文件,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04

最新评论