目錄

一、背景

二、4種方法

1、子組件向父組件傳遞一個值

2、子組件向父組件傳遞一個值，并攜帶額外參數

3、子組件向父組件傳遞多個值

4、子組件向父組件傳遞多個值，并攜帶額外參數

---

一、背景

詳情頁集成了很多子組件， 
但是父組件的一個上傳文件的地方回顯拿不到最新的文件個數，
但這里有需要上傳的文件判空處理。

首先想到的是回顯的時候直接獲取文件集合的大小即可，
但是刪除文件后還是更新不了最新的值，
所以子只能子組件傳更新最新的值給父組件做判斷了。

二、4種方法

1、子組件向父組件傳遞一個值

子組件：

var num= this.fileList().size()
this.$emit('change', num);

父組件：

??<!-- 在父組件中使用子組件 -->

<editable-cell :num="num" :inputType="inputType" @change="handleChange($event)" />


// 事件處理函數

async handleChange(value) {

this.num = value;

}

在使用子組件時，綁定change函數的事件處理函數也可以寫成如下格式：?

<editable-cell :num="num" :inputType="inputType" @change="handleChange" />

綁定事件處理函數時，可以不帶括號，形參則默認為事件對象，如果綁定時帶上了括號，再想使用事件對象則需要傳入$event作為實參。

2、子組件向父組件傳遞一個值，并攜帶額外參數

record為額外參數( 本文的額外參數都拿record做舉例 )。

子組件：

this.$emit('change', this.value);

父組件：

    <!-- 插槽 -->

    <template slot="planned_amount" slot-scope="text, record">

    <!-- 在父組件中使用子組件 -->

    <editable-cell :num="num" :inputType="inputType" @change="handleChange(record,$event)" />

    </template>



    // 事件處理函數

    async handleChange(record,value) {

    console.log(record,value)

    },

綁定事件處理函數時，record和$event的順序不做要求，但是按照vue事件綁定的習慣，$event通常放在實參列表末尾。

3、子組件向父組件傳遞多個值

子組件：

// 向父組件傳遞了兩個值

this.$emit('change', this.value,this.text);

父組件：

<editable-cell :text="text" :inputType="inputType" @change="handleChange" />

// 事件處理函數

async handleChange(param1,param2) {

console.log(param1,param2)

},

綁定事件處理函數時，不能攜帶括號！！！如果攜帶括號并且在括號內加了$event，只能拿到子組件傳遞過來的第一個參數。

4、子組件向父組件傳遞多個值，并攜帶額外參數

record為額外參數( 本文的額外參數都拿record做舉例 )。

子組件：

// 向父組件傳遞了兩個值

this.$emit('change', this.value,this.text);

父組件：

    <template slot="planned_amount" slot-scope="text, record">

    <!-- 在父組件中使用子組件 -->

    <editable-cell :text="text" :inputType="inputType" @change="handleChange(record,arguments)" />

    </template>



    // 事件處理函數

    async handleChange(record,args) {

    console.log(record,args)

    },

arguments是方法綁定中的一個關鍵字，內部包括了所有方法觸發時傳遞過來的實參。arguments和額外參數的位置誰先誰后不做要求，建議arguments放后面。

有用請點贊，養成良好習慣！

疑問、交流、鼓勵請留言！