第三方组件及计算属性传参的问题解决方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了第三方组件及计算属性传参的问题解决方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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 啦。文章来源地址https://www.toymoban.com/news/detail-746019.html

到了这里，关于第三方组件及计算属性传参的问题解决方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！