第三方組件及計算屬性傳參的問題解決方式

1. 前言

唉，好想玩滋嘣。

2. 計算屬性直接傳參接收不到

表格數據某一列需要用的計算屬性時，模板中使用計算屬性 fullName 就會直接調用 fullName 函數，而在模板中 fullName(item) 相當於fullName()(item)，此處為函數柯里化。

<el-table-column label="名稱" align="center" min-width="20%">
<template slot-scope="scope">
  <p
	v-for="(item, index) in scope.row.dataList "
	:key="item.id"
>
	{{ fullName(item) }}
  </p>
</template>
</el-table-column>

// ...
computed: {
// fullName(param) 里接收到的是組件實例對象！
	fullName() {
		return item=> {
			return item.firstName + item.lastName
		}
	}
}

3. 第三方組件的事件想要傳參會立即執行且會被覆蓋問題

封裝好的組件的事件回調函數想要傳其它參數，事件的回調直接寫:before-upload="beforeUpload('a')" ，不僅會立即執行，還會覆蓋預設參數；解決的方式類似：

<el-form-item label="文件：">
  <el-upload
	:action=""
	:before-upload="beforeUpload('a')"
	:file-list="fileList"
>
	<el-button size="small" type="primary">點擊上傳</el-button>
  </el-upload>
</el-form-item>

// ...
// 上傳文件前
beforeUpload(myParams) {
  return file => {
	console.log(file, myParams);
  };
},

:before-upload="beforeUpload('a')"，引號內為事件的回調，應該是一個函數，而不是函數的執行，但這裡我們執行 beforeUpload 接收想要傳遞的參數，並直接返回一個函數，作為新的事件回調，沿著作用域鏈就可以拿到 myParams 啦。