Vue?通過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ù)
//新訂單頁面跳轉(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：的簡寫
<indexImportOrder ref="indexImportOrder" v-on:closeMain="closeMain"/>
val及為子組件中flag，即接收的子組件參數(shù)
closeMain(val){
this.flag = val;
},
更詳細(xì)解釋可參照：http://www.fzitv.net/article/114907.htm
到此這篇關(guān)于Vue this.$emit()方法通過子組件向父組件傳值的文章就介紹到這了,更多相關(guān)vue子組件向父組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目中實(shí)現(xiàn)緩存的最佳方案詳解
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中實(shí)現(xiàn)緩存的最佳方案，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
本文主要介紹了Vue實(shí)現(xiàn)模糊查詢搜索功能的步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10
這篇文章給大家分享Vue3搭建組件庫開發(fā)環(huán)境，給大家講解依次搭建組件庫、example、文檔、cli，本文內(nèi)容是搭建組件庫的開發(fā)環(huán)境的過程，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue3輸入無效路由跳轉(zhuǎn)到指定error頁面問題
這篇文章主要介紹了vue3輸入無效路由跳轉(zhuǎn)到指定error頁面問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
如何使用VuePress搭建一個(gè)類型element ui文檔
這篇文章主要介紹了如何使用VuePress搭建一個(gè)類型element ui文檔，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
如何搭建一個(gè)完整的Vue3.0+ts的項(xiàng)目步驟
這篇文章主要介紹了如何搭建一個(gè)完整的Vue3.0+ts的項(xiàng)目步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了Vue.js中的下載和調(diào)用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
使用form-create動(dòng)態(tài)生成vue自定義組件和嵌套表單組件
這篇文章主要介紹了使用form-create動(dòng)態(tài)生成vue自定義組件和嵌套表單組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
在vue.config.js中優(yōu)化webpack配置的方法
在日常開發(fā)中我們離不開打包工具webpack,但是不同的配置會(huì)影響我們項(xiàng)目的運(yùn)行構(gòu)建時(shí)間,也會(huì)影響打包之后項(xiàng)目包的大小,這篇文章記錄一下我使用過的可以優(yōu)化webpack的配置,需要的朋友可以參考下2024-05-05
本篇文章主要介紹了vue 文件目錄結(jié)構(gòu)詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11