利用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)
},綁定事件處理函數時，不能攜帶括號?。?！如果攜帶括號并且在括號內加了$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是方法綁定中的一個關鍵字，內部包括了所有方法觸發時傳遞過來的實參。arguments和額外參數的位置誰先誰后不做要求，建議arguments放后面。
查看args的打印結果：
看完上述內容，你們掌握利用VUE實現子組件向父組件傳值的方法的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
