詳解vue中this.$emit()的返回值是什么
更新時(shí)間：2019年04月07日 10:23:27 作者：GeekQiaQia
這篇文章主要介紹了詳解vue中this.$emit()的返回值是什么，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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()向子組件傳遞一個(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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vant-image本地圖片無法顯示的解決方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(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)過程
這篇文章主要介紹了 Vue 源碼分析之 Observer實(shí)現(xiàn)過程，Observer 最主要的作用就是實(shí)現(xiàn)了touch -Data(getter) - Collect as Dependency這段過程，也就是依賴收集的過程，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03
深入探討Vue3實(shí)現(xiàn)多數(shù)據(jù)變化監(jiān)聽的方式
隨著 Vue 3 的發(fā)布,框架帶來了更多的新特性和增強(qiáng),其中之一就是 watch 函數(shù)的升級,這一改進(jìn)使得多個(gè)數(shù)據(jù)的變化偵聽更加優(yōu)雅和靈活,本文將深入探討 Vue 3 中的 watch 函數(shù),以及如何以更加優(yōu)雅的方式實(shí)現(xiàn)對多個(gè)數(shù)據(jù)變化的監(jiān)聽2023-08-08
下面小編就為大家分享一篇Vue2.0子同級組件之間數(shù)據(jù)交互方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
element-ui多文件上傳的實(shí)現(xiàn)示例
這篇文章主要介紹了element-ui多文件上傳的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue里的data要用return返回的原因淺析,需要的朋友可以參考下2019-05-05
vue權(quán)限路由實(shí)現(xiàn)的方法示例總結(jié)
這篇文章主要給大家介紹了關(guān)于vue權(quán)限路由實(shí)現(xiàn)方法的相關(guān)資料，文中通過示例代碼介紹地方非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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