欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

一、子組件向父組件傳遞一個(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ù)也可以寫(xiě)成如下格式：

<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)！??！如果攜帶括號(hào)并且在括號(hào)內(nèi)加了$event，只能拿到子組件傳遞過(guò)來(lái)的第一個(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í)傳遞過(guò)來(lái)的實(shí)參。arguments和額外參數(shù)的位置誰(shuí)先誰(shuí)后不做要求，建議arguments放后面。

查看args的打印結(jié)果：

總結(jié)

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

相關(guān)文章

最新評(píng)論