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

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

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

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

在事件中有

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

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

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

代碼示例：

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

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

在script 標(biāo)簽中：

通過 this.$emit("Echange", e.target.value, val => { console.log(val); }); 通過回調(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) {
 // 都會失敗
 e.stopPropagation();
}
 }
};
</script>

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

父組件可以通過回調(diào)函數(shù)，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>

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

您可能感興趣的文章:

相關(guān)文章

Vue3 Pinia如何修改全局狀態(tài)變量值
這篇文章主要介紹了Vue3 Pinia如何修改全局狀態(tài)變量值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-05-05
vue圖片上傳組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue圖片上傳組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-12-12
結(jié)合Vue控制字符和字節(jié)的顯示個數(shù)的示例
這篇文章主要介紹了結(jié)合Vue控制字符和字節(jié)的顯示個數(shù)的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
Vue項目中token驗證登錄(前端部分)
這篇文章主要為大家詳細(xì)介紹了Vue項目中token驗證登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue3+Vant實現(xiàn)簡單的登錄功能
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Vant實現(xiàn)簡單的登錄功能,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
解決ant Design中Select設(shè)置initialValue時的大坑
這篇文章主要介紹了解決ant Design中Select設(shè)置initialValue時的大坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
Vue 報錯TypeError: this.$set is not a function 的解決方法
這篇文章主要介紹了Vue 報錯TypeError: this.$set is not a function 的解決方法，分享給大家，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
Vue登錄攔截登錄后繼續(xù)跳轉(zhuǎn)指定頁面的操作
這篇文章主要介紹了Vue登錄攔截登錄后繼續(xù)跳轉(zhuǎn)指定頁面的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue項目中如何實現(xiàn)element-ui組件按需引入
這篇文章主要介紹了vue項目中如何實現(xiàn)element-ui組件按需引入，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue-Element-Admin集成自己的接口實現(xiàn)登錄跳轉(zhuǎn)
關(guān)于這個Vue-element-admin中的流程可能對于新的同學(xué)不是很友好，所以本文將結(jié)合實例代碼，介紹Vue-Element-Admin集成自己的接口實現(xiàn)登錄跳轉(zhuǎn)，感興趣的小伙伴們可以參考一下
2021-06-06