亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

VUE子組件向父組件傳值詳解（含傳多值及添加額外參數(shù)場景）

 更新時間：2020年09月01日 11:10:01   作者：一羊遷徙  
這篇文章主要給大家介紹了關于VUE子組件向父組件傳值（含傳多值及添加額外參數(shù)場景）的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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

子組件：

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

父組件：

<!-- 在父組件中使用子組件 -->
<editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" />

// 事件處理函數(shù)
async costPlannedAmountChange(value) {
	console.log(value)
}

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

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

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

二、子組件向父組件傳遞一個值，并攜帶額外參數(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ù)時，record和$event的順序不做要求，但是按照vue事件綁定的習慣，$event通常放在實參列表末尾。

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

子組件：

// 向父組件傳遞了兩個值
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ù)時，不能攜帶括號?。。∪绻麛y帶括號并且在括號內加了$event，只能拿到子組件傳遞過來的第一個參數(shù)。

四、子組件向父組件傳遞多個值，并攜帶額外參數(shù)

record為額外參數(shù)( 本文的額外參數(shù)都拿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>

// 事件處理函數(shù)
async costPlannedAmountChange(record,args) {
  console.log(record,args)
},

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

查看args的打印結果：

總結

到此這篇關于VUE子組件向父組件傳值（含傳多值及添加額外參數(shù)場景）的文章就介紹到這了,更多相關VUE子組件向父組件傳值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論