Vue?通過(guò)this.$emit()方法子組件向父組件傳值(步驟分享)
子組件使用this.$emit()向父組件傳值
首先必須在父組件中引用子組件，然后實(shí)現(xiàn)傳值
第一步 在父組件中引入子組件
使用import引入組件
import indexImportOrder from './components/indexImportOrder'
聲明
//定義組件
components:{
indexImportOrder,
},使用
<indexImportOrder ref="indexImportOrder"/>
第二步 子組件向父組件傳值
1. 在子組件中需要向父組件傳值處使用this.$emit("function",param); //其中function為父組件定義函數(shù)，param為需要傳遞參數(shù)
//新訂單頁(yè)面跳轉(zhuǎn)
viewBusiness(){
let flag = false;
this.$emit('closeMain',flag);
},2. 在父組件中子組件引用處添加函數(shù)v-on:function="function1"； //其中function為子組件中定義函數(shù)，function1為父組件定義函數(shù)--用于接收子組件傳值并進(jìn)行相應(yīng)數(shù)據(jù)處理，可定義為同一名稱
v-on： 可用 @ 代替 @function="function1" ，@ 為 v-on：的簡(jiǎn)寫(xiě)
<indexImportOrder ref="indexImportOrder" v-on:closeMain="closeMain"/>
val及為子組件中flag，即接收的子組件參數(shù)
closeMain(val){
this.flag = val;
},
更詳細(xì)解釋可參照：http://www.dbjr.com.cn/article/114907.htm
到此這篇關(guān)于Vue this.$emit()方法通過(guò)子組件向父組件傳值的文章就介紹到這了,更多相關(guān)vue子組件向父組件傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-router之實(shí)現(xiàn)導(dǎo)航切換過(guò)渡動(dòng)畫(huà)效果
今天小編就為大家分享一篇vue-router之實(shí)現(xiàn)導(dǎo)航切換過(guò)渡動(dòng)畫(huà)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
本文通過(guò)實(shí)例代碼給大家介紹了vue 2.x 中axios 封裝的get 和post方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-02-02
Electron+vue3項(xiàng)目使用SQLite3數(shù)據(jù)庫(kù)詳細(xì)步驟(超詳細(xì))
Electron是一個(gè)基于vue.js的新框架,它可以構(gòu)建桌面應(yīng)用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項(xiàng)目使用SQLite3數(shù)據(jù)庫(kù)的詳細(xì)步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
解決在vue項(xiàng)目中webpack打包后字體不生效的問(wèn)題
今天小編就為大家分享一篇解決在vue項(xiàng)目中webpack打包后字體不生效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
本文章向大家介紹vue組件中的數(shù)據(jù)共享，主要包括vue組件中的數(shù)據(jù)共享使用實(shí)例、應(yīng)用技巧、基本知識(shí)點(diǎn)總結(jié)和需要注意事項(xiàng)，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-11-11
這篇文章主要介紹了vue中返回結(jié)果是promise的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vant自定義引入iconfont圖標(biāo)及字體的方法步驟
因?yàn)関antUI給的圖標(biāo)非常少,為了滿足自己的需求,就應(yīng)該找到一種方法來(lái)向vant添加自己自定義的圖標(biāo),對(duì)于自定義圖標(biāo)我第一時(shí)間想到的就是阿里的iconfont矢量圖庫(kù),這篇文章主要給大家介紹了關(guān)于vant自定義引入iconfont圖標(biāo)及字體的方法步驟,需要的朋友可以參考下2023-09-09
基于Vue3實(shí)現(xiàn)前端埋點(diǎn)上報(bào)插件并打包發(fā)布到npm的詳細(xì)過(guò)程
這篇文章主要介紹了基于Vue3實(shí)現(xiàn)一個(gè)前端埋點(diǎn)上報(bào)插件并打包發(fā)布到npm,本項(xiàng)目采用pnpm進(jìn)行Monorepo環(huán)境搭建,因?yàn)槲磥?lái)這個(gè)項(xiàng)目可能會(huì)加入更多的工具包，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue監(jiān)聽(tīng)dom大小改變案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了vue axios登錄請(qǐng)求攔截器，判斷是否登錄超時(shí)，或?qū)φ?qǐng)求結(jié)果做一個(gè)統(tǒng)一處理的教程詳解,需要的朋友可以參考下2018-04-04