在项目开发中,我们可能封装了一个组件,但这个组件在很多页面都用到的,但是这些页面里面用的的数据并不相同,后台数据所对应的字段也不相同,这个时候就需要前端自己想办法去解决这个问题,最简单的方法就是复制粘贴重新弄个组件,然后更改一下相对应的字段,但是这样下去不就违背了组件的可复用的初衷了么?另一方面,也不利于项目后期的维护,那怎么解决这个问题呢?
一、子组件的配置
1.新建一个js文件用来进行不同数据的转换
export default {
CALLBACK_DATE: 'callbackDate', // 最近回访日
CARD_LEAVE_NAME: 'cardLevelName', // 卡级别名称
CONSUME_DATE: 'consumeDate', // 最近消费日期
MEMBER_AGE: 'memberAge', // 年龄
MEMBER_CARD_NO: 'memberCardNo', // 卡号
MEMBER_NAME: 'memberName', // 姓名
MEMBER_PHONE: 'memberPhone', // 电话
MEMBER_SEX: 'memberSex', // 性别
SERVICE_WAITER_NAME: 'serviceWaiterName', // 性别
}
export default{}这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件,而在另一个文件 B 里面需要用到它,那么就要用 ES6 的 import/export 语法 ,在文件 A 中定义输出接口 export ,在文件 B 中引入 import ,把引入的组件用起来,这样就可以复用组件 A 去配合文件 B 生成 html 页面了。
export加default直接import from 引入
export不加default需要import { } from 引入
2.组件自带js配置
//引入
import constant from "./constant"
//接收父组件参数
properties: {
props: {
type: Object,
value: {
[constant.MEMBER_NAME]: constant.MEMBER_NAME, // 姓名
[constant.MEMBER_SEX]: constant.MEMBER_SEX, // 性别
[constant.MEMBER_AGE]: constant.MEMBER_AGE, // 年龄
[constant.CARD_LEAVE_NAME]: constant.CARD_LEAVE_NAME, // 普通卡
[constant.MEMBER_CARD_NO]: constant.MEMBER_CARD_NO, // 卡号
[constant.CONSUME_DATE]: constant.CONSUME_DATE, // 最后消费日
[constant.MEMBER_PHONE]: constant.MEMBER_PHONE, // 手机号
[constant.SERVICE_WAITER_NAME]: constant.SERVICE_WAITER_NAME, // 服务专员
[constant.CALLBACK_DATE]: constant.CALLBACK_DATE // 最后回访日
}
}
}
//页面初始化执行(attached()在组件实例进入页面节点树时执行,detached()在组件实例被从页面节点树移除时执行)
lifetimes: {
attached() {
this._init()
}
},
//默认数据
data: {
emptyValue: '-',
user: {},
},
//方法
_init() {
const { props, item, emptyValue } = this.data
const user = {}
for (const key of Object.keys(props)) {
const val = props[key]
user[key] = _everyVal(item[val])
}
function _everyVal (val) {
if (
val || val === 0
) {
return val
}
return emptyValue
}
console.log('user =>', user)
this.setData({
user
})
}
3.父组件配置
//传值
<h-user-card item="{{item}}" bind:click="_clickHandle" props="{{prop}}">
//配置
prop: {
[constant.MEMBER_NAME]: "name", // 姓名
[constant.MEMBER_SEX]: constant.MEMBER_SEX, // 性别
[constant.MEMBER_AGE]: constant.MEMBER_AGE, // 年龄
[constant.CARD_LEAVE_NAME]: constant.CARD_LEAVE_NAME, // 普通卡
[constant.MEMBER_CARD_NO]: "cardNum", // 卡号
[constant.CONSUME_DATE]: constant.CONSUME_DATE, // 最后消费日
[constant.MEMBER_PHONE]: constant.MEMBER_PHONE, // 手机号
[constant.SERVICE_WAITER_NAME]: constant.SERVICE_WAITER_NAME, // 服务专员
[constant.CALLBACK_DATE]: constant.CALLBACK_DATE // 最后回访日
}
将后面的值改成对应的后台返回值就可以了