例如有如下場景
先熟悉一下 Vue事件處理
<!-- 父組件 -->
<template>
<div>
<!--我們想在這個dealName的方法中傳遞額外參數name -->
<test-son v-for="item in list" @dealName="todo(item.name, arguments)" :item="item"></test-son>
</div>
</template>
<script>
export default {
name: 'test-p',
data() {
return {
list: [{
name: '小王'
}, {
name: '小剛'
}]
}
},
methods: {
todo(name, data) {
console.log(name);
console.log(data)
}
}
}
</script>
<!-- 子組件 -->
<template>
<div>
<button @click="sendData">發射{{item.name}}</button>
</div>
</template>
<script>
export default {
name: 'test-s',
props: ['item'],
methods: {
sendData() {
this.$emit('dealName', '王老吉');
}
}
}
</script>
當我們點擊子組件button的時候就會打印對應的 xxx, 王老吉
接下來分析一下上述代碼運作原理。
在vue官網上面有個在線模板編譯
當我們給模板上的自定義事件添加額外參數的時候，我們的綁定函數就會被包裹上一層代碼，function($event){xxx}
上述函數在子組件中emit的時候被調用，可以理解為 var dealName = function($event){xxx}
dealName.apply(vm, args);這其中由於事件函數在初始化的時候就進行了bind，所以在函數中this指向的是父組件的實例，而args則是$emit中傳遞的參數，所以在父組件中模板中通過argumens可以獲取所有子組件emit的參數