vue使用$emit傳遞參數(shù)方式
更新時(shí)間：2024年04月18日 10:55:44 作者：榮~博客
這篇文章主要介紹了vue使用$emit傳遞參數(shù)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue使用$emit傳遞參數(shù)
傳遞一個(gè)參數(shù)
1、子組件
this.$emit('getData','abcd')2、父組件
<child @getData="getData"></child>
getData(data){
console.log(data) // 'abcd'
}
傳遞多個(gè)參數(shù)
第一種方法
- 1、子組件
let obj = {
data1: 'abcd',
data2: 'abcdefg'
}
this.$emit('getData',obj)
- 2、父組件
<child @getData="getData"></child>
getData(data){
console.log(data) // {data1:'abcd',data2:'abcdefg'}
}
第二種方法
- 1、子組件
this.$emit('getData','abcd','abcdefg')- 2、父組件
<child @getData="getData(arguments)"></child>
getData(data){
console.log(data[0],data[1]) // 'abcd' 'abcdefg'
}
對于$emit的用法
可以總結(jié)：
- 子組件通過$emit的方式，調(diào)用父組件中的事件,進(jìn)行傳遞數(shù)據(jù)
- $emit函數(shù)只能在子組件中使用
一、子組件
<div>
<!-- 1 給子組件綁定一個(gè)點(diǎn)擊事件 -->
<el-button type="primary" size="small" @click="btnFn">我是子組件</el-button>
</div>
</template>
<script>
export default {
methods: {
// 2 聲明事件處理函數(shù)
btnFn() {
console.log("點(diǎn)擊到了");
// 3 子傳父
// 執(zhí)行$emit函數(shù)，會(huì)調(diào)用父組件中名為sonEvent的函數(shù)再將"hello world"的值傳過去
this.$emit("sonEvent", "hello world");
},
},
};
</script>
從上面子組件的代碼上看，我們可以知道，當(dāng)子組件被點(diǎn)擊的時(shí)候，會(huì)觸發(fā)btnFn事件，再聲明btnFn()事件處理函數(shù)，之后執(zhí)行$emit函數(shù)，該emit函數(shù)會(huì)調(diào)用下面父組件中名為sonEvent的事件，并將“hello world”的值傳遞給父組件。
二、父組件
<div id="app">
<!-- 4 接收子傳父 @inputFn="fatInput" -->
<!-- @sonEvent 與子組件this.$emit('sonEvent',...)起的名字一致 -->
<son @sonEvent="sonFn"></son>
</div>
</template>
<script>
import son from "./components/son.vue";
export default {
name: "app",
components: {
son,
},
methods: {
// 5 接收參數(shù)
sonFn(data) {
console.log(data);
},
},
};
</script>
父組件的sonEvent事件被觸發(fā)，調(diào)用sonFn函數(shù)，可以在控制臺上打印接收到子組件傳遞過來的值
三、運(yùn)行結(jié)果
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目引入antDesignUI組件實(shí)現(xiàn)
本文介紹了如何以Vue引入antDesignUI,主要包括下載安裝、配置和引入組件等步驟,通過本文,讀者可以快速了解antDesignUI在Vue中的應(yīng)用,感興趣的可以了解一下2023-08-08
vue-router4動(dòng)態(tài)路由刷新404/白屏的解決
本文主要介紹了vue-router4動(dòng)態(tài)路由刷新404/白屏的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了vue如何關(guān)閉prettier警告warn問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
element-ui自定義表格如何給input雙向綁定數(shù)據(jù)
這篇文章主要介紹了element-ui自定義表格如何給input雙向綁定數(shù)據(jù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue列表自動(dòng)滾動(dòng)實(shí)例代碼,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了element中el-select的使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
使用Vue+ElementUI動(dòng)態(tài)生成面包屑導(dǎo)航教程
Vue和ElementUI都是非常流行的前端開發(fā)框架,它們可以讓我們更加便捷地開發(fā)前端應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于使用Vue+ElementUI動(dòng)態(tài)生成面包屑導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2023-05-05
vue父組件監(jiān)聽子組件數(shù)據(jù)更新方式(hook)
這篇文章主要介紹了vue父組件監(jiān)聽子組件數(shù)據(jù)更新方式(hook)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
element中el-container容器與div布局區(qū)分詳解
這篇文章主要介紹了element中el-container容器與div布局區(qū)分詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue響應(yīng)式原理與雙向數(shù)據(jù)的深入解析
Vue 最獨(dú)特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng)。下面這篇文章主要給大家介紹了關(guān)于vue響應(yīng)式原理與雙向數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2021-06-06