一、子元件向父元件傳遞一個值

子元件：

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.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子元件向父元件傳值（含傳多值及新增額外引數場景）的文章就介紹到這了,更多相關VUE子元件向父元件傳值內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！