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