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