VUE子組件向父組件傳值詳解（含傳多值及添加額外參數場景）
更新時間：2020年09月01日 11:10:01 作者：一羊遷徙
這篇文章主要給大家介紹了關于VUE子組件向父組件傳值（含傳多值及添加額外參數場景）的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
一、子組件向父組件傳遞一個值
子組件：
this.$emit('change', this.value);
父組件：
<!-- 在父組件中使用子組件 --> <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" />
// 事件處理函數
async costPlannedAmountChange(value) {
console.log(value)
}
在使用子組件時，綁定change函數的事件處理函數也可以寫成如下格式：
<editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange" />
綁定事件處理函數時，可以不帶括號，形參則默認為事件對象，如果綁定時帶上了括號，再想使用事件對象則需要傳入$event作為實參。
二、子組件向父組件傳遞一個值，并攜帶額外參數
record為額外參數( 本文的額外參數都拿record做舉例 )。
子組件：
this.$emit('change', this.value);
父組件：
<!-- 插槽 --> <template slot="planned_amount" slot-scope="text, record"> <!-- 在父組件中使用子組件 --> <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange(record,$event)" /> </template>
// 事件處理函數
async costPlannedAmountChange(record,value) {
console.log(record,value)
},
綁定事件處理函數時，record和$event的順序不做要求，但是按照vue事件綁定的習慣，$event通常放在實參列表末尾。
三、子組件向父組件傳遞多個值
子組件：
// 向父組件傳遞了兩個值
this.$emit('change', this.value,this.text);
父組件：
<editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange" />
// 事件處理函數
async costPlannedAmountChange(param1,param2) {
console.log(param1,param2)
},
綁定事件處理函數時，不能攜帶括號?。。∪绻麛y帶括號并且在括號內加了$event，只能拿到子組件傳遞過來的第一個參數。
四、子組件向父組件傳遞多個值，并攜帶額外參數
record為額外參數( 本文的額外參數都拿record做舉例 )。
子組件：
// 向父組件傳遞了兩個值
this.$emit('change', this.value,this.text);
父組件：
<template slot="planned_amount" slot-scope="text, record"> <!-- 在父組件中使用子組件 --> <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange(record,arguments)" /> </template>
// 事件處理函數
async costPlannedAmountChange(record,args) {
console.log(record,args)
},
arguments是方法綁定中的一個關鍵字，內部包括了所有方法觸發(fā)時傳遞過來的實參。arguments和額外參數的位置誰先誰后不做要求，建議arguments放后面。
查看args的打印結果：
總結
到此這篇關于VUE子組件向父組件傳值（含傳多值及添加額外參數場景）的文章就介紹到這了,更多相關VUE子組件向父組件傳值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
下面小編就為大家分享一篇vue 路由頁面之間實現用手指進行滑動的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue實現列表倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
虛擬滾動列表是一種優(yōu)化長列表渲染性能的技術,通過只渲染可視區(qū)域內的列表項,減少DOM的渲染數量,本文就來介紹一下Vue3實現動態(tài)高度的虛擬滾動列表的示例代碼,具有一定的參考價值,感興趣的可以了解一下2025-01-01
VueUse為Vue開發(fā)人員提供了大量適用于Vue2和Vue3的基本Composition API 實用程序函數。具有一定的參考價值，感興趣的可以了解一下2021-11-11
這篇文章主要介紹了vue中父子組件的參數傳遞和應用示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了vuex存取值和映射函數使用說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue3使用深度選擇器修改樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
一般我們的前端Vue項目中都會涉及到跨域的問題,下面這篇文章主要給大家介紹了關于vue項目部署跨域問題的詳細解決過程,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
vue本地構建熱更新卡頓的問題“75?advanced?module?optimization”完美解決方案
這篇文章主要介紹了vue本地構建熱更新卡頓的問題“75?advanced?module?optimization”解決方案,每次熱更新都會卡在?"75?advanced?module?optimization"?的地方不動了，如何解決這個問題呢，下面小編給大家?guī)砹私鉀Q方案，需要的朋友可以參考下2022-08-08
大家都知道當使用時才裝入需要的組件，可以有效的提高首次裝入頁面的速度。比如在路由切換時，下面這篇文章主要給大家介紹了關于如何實現一個簡單的Vue異步組件的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-12-12