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
啦。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件举报,一经查实,本站将立刻删除。