快捷導(dǎo)航

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

更新時(shí)間：2019年04月07日 10:23:27 作者：GeekQiaQia

這篇文章主要介紹了詳解vue中this.$emit()的返回值是什么，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

vue中的三大屬性:屬性、事件、插槽，---事件

在事件中有

普通事件：@click/@input/@change/@xxx...事件；

修飾符事件：@input.trim,@click.stop,@submit.prevent...一般用于原生html元素；

答：在vue中this.$emit(); 返回值是this;

代碼示例：

在子組件中：Event.vue:接收通過(guò)父組件傳遞過(guò)來(lái)的props:{name:String} 屬性；在input 標(biāo)簽中：

value=name; 綁定name屬性；
通過(guò)@change="handleChange" 普通事件;監(jiān)聽(tīng)輸入框輸入值；

在script 標(biāo)簽中：

通過(guò) this.$emit("Echange", e.target.value, val => { console.log(val); }); 通過(guò)回調(diào)，傳遞值到父組件；自定義事件“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) {
 // 都會(huì)失敗
 e.stopPropagation();
}
 }
};
</script>

在父組件中通過(guò)監(jiān)聽(tīng)子組件事件，對(duì)回調(diào)做出響應(yīng)；

父組件可以通過(guò)回調(diào)函數(shù)，callback()向子組件傳遞一個(gè)值；

<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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vant-image本地圖片無(wú)法顯示的解決方式
這篇文章主要介紹了vant-image本地圖片無(wú)法顯示的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue實(shí)現(xiàn)懸浮球效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)懸浮球效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
基于cropper.js封裝vue實(shí)現(xiàn)在線圖片裁剪組件功能
這篇文章主要介紹了基于cropper.js封裝vue實(shí)現(xiàn)在線圖片裁剪組件功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-03-03
Vue 源碼分析之 Observer實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了 Vue 源碼分析之 Observer實(shí)現(xiàn)過(guò)程，Observer 最主要的作用就是實(shí)現(xiàn)了touch -Data(getter) - Collect as Dependency這段過(guò)程，也就是依賴(lài)收集的過(guò)程，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
2018-03-03
深入探討Vue3實(shí)現(xiàn)多數(shù)據(jù)變化監(jiān)聽(tīng)的方式
隨著 Vue 3 的發(fā)布,框架帶來(lái)了更多的新特性和增強(qiáng),其中之一就是 watch 函數(shù)的升級(jí),這一改進(jìn)使得多個(gè)數(shù)據(jù)的變化偵聽(tīng)更加優(yōu)雅和靈活,本文將深入探討 Vue 3 中的 watch 函數(shù),以及如何以更加優(yōu)雅的方式實(shí)現(xiàn)對(duì)多個(gè)數(shù)據(jù)變化的監(jiān)聽(tīng)
2023-08-08
Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法
下面小編就為大家分享一篇Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
element-ui多文件上傳的實(shí)現(xiàn)示例
這篇文章主要介紹了element-ui多文件上傳的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue里的data要用return返回的原因淺析
這篇文章主要介紹了vue里的data要用return返回的原因淺析,需要的朋友可以參考下
2019-05-05
vue權(quán)限路由實(shí)現(xiàn)的方法示例總結(jié)
這篇文章主要給大家介紹了關(guān)于vue權(quán)限路由實(shí)現(xiàn)方法的相關(guān)資料，文中通過(guò)示例代碼介紹地方非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-07-07
VueJS設(shè)計(jì)與實(shí)現(xiàn)之淺響應(yīng)與深響應(yīng)詳解
這篇文章主要為大家介紹了VueJS設(shè)計(jì)與實(shí)現(xiàn)之淺響應(yīng)與深響應(yīng)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08